CSS 列表 li 底部空行Bug
2018-02-26 21:55
399 查看
列表 li 底部空行Bug
在IE6及更低版本中,如果在 li 元素中包含 display: block 的元素时,li 元素之间的空格将会转换为一个空行,夹在每个 li 的中间。假设使用上一节的HTML结构来制作垂直导航,为了增大链接的点击区域,常常将 a 元素的 display 属性设置为 block,让它成为块级元素。为了方便查看效果,为链接设置背景颜色:li a {
display: block;
background: #fa7a20;
}
在现代浏览器中的运行结果如图 10‑8 所示:
图10-8 现代浏览器中运行结果在IE6以更低版本中的运行结果如图 10‑9 所示:
图10-9 IE6及更低版本中运行结果导致这个问题的根本原因,是 li 元素后面的空格或换行符被转换为空行。如果在HTML代码中,将所有的 li 在一行内连续书写,中间没有空格,这个问题就不会出现。然而,当存在很多 li 子元素时,在一行内书写会给阅读代码带来困难。事实上,除了在一行内显示外,这个问题还有很多解决方法。方法一:为 li 元素设置 display: inline,让它在行内显示。由于内部的 a 元素是块级元素,这种方法不会产生任何负面影响。因此,这应该是最简单的解决方法。
li a {
display: inline;
}
方法二:为 a 元素显式定义一个宽度或高度,使它触发IE的hasLayout。
li a {
…
width: 200px;
}
如果使用高度来触发IE的hasLayout,可以同时定义 line-height 属性,并设置为height 属性相同的值,还可以让链接垂直居中,一举两得。方法三:为每个 li 元素设置一个下边框。
ul li {
border-bottom: 1px solid #fff;
}
在解决问题的同时,这个边框还起到分隔 li 元素的作用,此方法可谓一举两得。但是,如果你偏偏不允许分隔 li 元素,这又带来新的问题,就是当边框颜色和背景颜色不一致时,将会影响显示效果。所以,最好将边框的颜色,设置成背景颜色。当然,也可以为 li 元素设置一个与边框等宽的负值下外边距,这样,就不必为边框颜色而纠结了。
ul li {
margin-bottom: -1px;
border-bottom: 1px solid #fff;
}
方法四:让 a 元素进行浮动,同时清除浮动。
li a {
…
float: left;
clear: left;
}
由于浮动会导致 a 元素的宽度收缩,又会增加额外的 clear 属性,并不推荐使用这种方法。但总归它是一种解决方法,应该会有合适的应用场景。
906e
相关文章推荐
- 【IE6的疯狂之九】li在IE中底部空行的BUG
- 【IE6的疯狂之九】li在IE中底部空行的BUG
- li在IE中底部空行的BUG
- li在IE中底部空行的BUG
- 【IE6的疯狂之九】li在IE中底部空行的BUG
- CSS------让ul中高度不同的li底部对齐
- css基础 去除ul,li无序列表前面的符号
- 发现IE6、IE7下列表li中内联块级元素的错位bug
- div+css设置列表li超出部分显示省略号
- CSS利用UL LI制作横向列表菜单
- 最新的IE6、IE7和IE8的CSS BUG汇总列表(转)
- css基础 去除ul,li无序列表前面的符号
- div+css布局必了解的列表元素ul ol li dl dt dd详解
- 【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)
- IE6/IE7中li底部4px的Bug
- li margin-bottom在IE6,7中底部3像素的BUG
- 利用CSS背景定位实现列表项目符号图像的精确定位(ul,li,自定义项目符号)
- div+css布局必了解的列表元素ul ol li dl dt dd详解
- IE7 列表元素小Bug的CSS处理
- IE6 | IE7 li底部多出几像素bug