IE6 | IE7 li底部多出几像素bug
2012-02-05 14:20
267 查看
IE6 | IE7 li底部多出几像素bug
作者: admin 日期:一月 18, 2012发表评论 (0)查看评论
先看2个截图
IE6、IE7
chrome:
图示代码地址:http://jsfiddle.net/baofen14787/tH4YL/1/
会发现在IE6–7下,LI底部会多出几个像素,网上很多人说这是li的3pxbug,实际不然。底部的空隙和字体大小和高度有关。并不一定是3px。
出现这个bug的条件如下
必要条件:
li的子元素设置了浮动(例如:本例中的span设置了左浮动)
充要条件:
(IE6/7)li设置了width、height、zoom 之一 (例如:本文中的li设置了width)
解决方案也很简单:
1、别让li获得layout
2、设置li
{vertical-align:middle} (推荐这种方法,简单方便)
3、设置li {font-size:0} li span{font-size:12px}。
4、设置li{float:left;width:100%}
…
还有其他方法就不一一说了。
其他解决方案也有
(仅IE7)li设置了padding-top、padding-bottom、margin-top、margin-bottom 之一
相关文章推荐
- li margin-bottom在IE6,7中底部3像素的BUG
- IE6、IE7中li底部3px间距BUG
- 【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)
- IE6|IE7中li底部3px间距BUG
- 【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)
- 【IE6的疯狂之九】li在IE中底部空行的BUG
- IE6 IE7 hasLayout bug之li间的3px垂直间距
- IE6下ul li a img下,img下面多余5像素空白的bug
- 【IE6的疯狂之九】li在IE中底部空行的BUG
- 【IE6的疯狂之九】li在IE中底部空行的BUG
- 【IE6的疯狂之十二】一个display:none引起的3像素的BUG
- IE6的3像素BUG
- 浏览器兼容性经典问题(二) IE6 3像素bug问题
- ie6,ie7,ie8 css bug兼容解决记录
- IE的CSS Bug列表(IE6,IE7和IE8)
- 修正IE6 IE7的window.resize bug
- IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总
- IE的CSS Bug列表(IE6,IE7和IE8)
- IE6/IE7中li底部4px的Bug
- IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总