产生的原因主要是由图片的垂直对齐方式vertical-align引发的，默认对齐方式为base-line；
解决方案：
1、将图片的垂直对齐方式vertical-align更改为 bottom；
2、将图片display设置为block，并且指定width 和 height；
3、设置图片所在的容器元素的width和height与图片一样。
二、当hover效果加边框时移动的问题
解决方案：给原始状态加一个透明边框
三、浮动问题
问题：子级元素的浮动，为父层元素所带来的影响，如果一个元素的所有子级内容都是浮动的，那么它的高度会变成 0；
解决方案：
1、设置父容器高度
2、设置父元素的 overflow:hidden
3、在父元素中，增加一个空元素，添加clear:both
问题：如果上面元素浮动的话可能会影响下面的元素，这时候可以给下面的元素加上一个清除浮动：clear：both/left/right,或者在这个元素之前加一个空元素，清除浮动。
这是样式的问题, 按照html规范, 一般的无论插入多少个空格(包括换行), 都当作一个空白字符来处理. 所以连着写的和换行的视觉表现是不同的.为了突出对比, 我举例如下:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<style>
.myNav {
margin-bottom: 10px
}
.myNav a{
display: inline-block
padding: 10px
text-decoration: none
background-color: #eee
}
</style>
</head>
<body>
<h5>html代码换行了</h5>
<div class="myNav">
<a href=""><span>所有订单</span></a>
<a href=""><span>待付款</span></a>
<a href=""><span>待发货</span></a>
<a href=""><span>待收货</span></a>
<a href=""><span>待评价</span></a>
</div>
<h5>html代码没换行</h5>
<div class="myNav">
<a href=""><span>所有订单</span></a><a href=""><span>待付款</span></a><a href=""><span>待发货</span></a><a href=""><span>待收货</span></a><a href=""><span>待评价</span></a>
</div>
</body>
</html>
不过, 通常我们会进行换行, 这样代码更具可读性. 如果因为换行导致的样式不是自己想要的, 例如对于样式display: inlin-block的元素, 会出现一个间隙. 这时候需要通过自己来调整样式达到预期效果. 有如下方式消除间隙:
方式1: 通过设置父元素的字体. 这种方式只是为了更好的说明为什么有空隙, 通常不要按这个办法那样做. 此外不同浏览器表现略有差异.
.myNav {margin-bottom: 10px
font-size: 0 /* 将父元素字体大小设为0, 消除换行造成的间隙 */
}
.myNav a{
display: inline-block
padding: 10px
text-decoration: none
background-color: #eee
font-size:13px /* 子元素重新设定字体大小 */
}
方式2: 使用float. 此方法能够兼容老旧浏览器.
.myNav {margin-bottom: 10px
}
.myNav a{
display: block /* 将子元素设为block */
float: left /* 使用float */
padding: 10px
text-decoration: none
background-color: #eee
}
/* 别忘了为父元素清除浮动 */
.myNav::after{
content:""
display: block
clear: both
}
方式3: 使用flex布局. 推荐做法, 但是老旧浏览器不兼容.
.myNav {margin-bottom: 10px
display: flex /* 使用flex */
}
.myNav a{
padding: 10px
text-decoration: none
background-color: #eee
}
以上是常见做法.另外要说的是, 大部分情况我们不需要消除这个间隙. 比如要子元素看起来是连续的, 可以设置父元素的背景等.
1.当加了doctype<img />标签的alt属性在ie8或以上不生效，所以推荐使用title属性。
2.什么情况下使用id选择器或class选择器
id选择器复用性比较低，优先级比较高，唯一使用，所以如果某个样式
只是给某一个html元素使用，则选择id选择器，如果一个样式可能给多个
html元素使用，则应当使用class选择器。
3.a:link 在ie5,6下无效
可以直接使用a{...}
4.IETest工具，也有一个兼容性问题，在win7下，打不开ie6。可以下载绿色版的ie6,不用安装直接用的那种。
5.在嵌套div中，如果外层div没有设置边框，内层div的margin-top会无效。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）