【IE6的疯狂之九】li在IE中底部空行的BUG
2013-09-24 17:16
344 查看
曾经写过【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题),原文地址:http://www.css88.com/archives/421;
IE6 BUG大全: http://www.css88.com/archives/579
但是这次li在IE中底部出现的不是3像素而是一整条空白行,如图:
HTML代码:
CSS代码:
查看demo,请使用IE6查看:http://www.css88.com/demo/IE6_bug/ie6-li/ie6-bug.html
IE6中列表的常见问题出现在当某个 li 中的内容是一个 display:block 的锚点(anchor)时。在这种情况下,列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。(转载请注明出处:http://www.css88.com)
解决方案1:
就是在li a 样式中加入zoom:1;
解决方案2:
就是在li 样式中加入display:inline ;
解决方法3(不推荐):
或者
就是将<li>标签写成一行;
解决方案4:(感谢.Roc Happyゞ提供的结局方案)
就是在li a 样式中加入width:100%或者一个宽度值;
转载请注明转自《【IE6的疯狂之九】li在IE中底部空行的BUG》
IE6 BUG大全: http://www.css88.com/archives/579
但是这次li在IE中底部出现的不是3像素而是一整条空白行,如图:
HTML代码:
1 | < ul > |
2 | < li >< a href = "#" >第1条连接</ a ></ li > |
3 | < li >< a href = "#" >第2条连接</ a ></ li > |
4 | < li >< a href = "#" >第3条连接</ a ></ li > |
5 | </ ul > |
1 | * { padding : 0 ; margin : 0 ;} |
2 | li {} |
3 | li a { background : #CCC ; border-bottom : 1px #000 solid ; text-decoration : none ; display : block ;} |
4 | li a:hover { background : #BBB ;} |
IE6中列表的常见问题出现在当某个 li 中的内容是一个 display:block 的锚点(anchor)时。在这种情况下,列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。(转载请注明出处:http://www.css88.com)
解决方案1:
1 | * { padding : 0 ; margin : 0 ;} |
2 | li {} |
3 | li a { background : #CCC ; border-bottom : 1px #000 solid ; text-decoration : none ; display : block ;zoom: 1 } |
4 | li a:hover { background : #BBB ;} |
解决方案2:
1 | * { padding : 0 ; margin : 0 ;} |
2 | li { display : inline } |
3 | li a { background : #CCC ; border-bottom : 1px #000 solid ; text-decoration : none ; display : block ;} |
4 | li a:hover { background : #BBB ;} |
解决方法3(不推荐):
1 | < ul > |
2 | < li >< a href = "#" >第1条连接</ a ></ li >< li >< a href = "#" >第2条连接</ a ></ li >< li >< a href = "#" >第3条连接</ a ></ li > |
3 | </ ul > |
1 | < ul > |
2 | < li >< a href = "#" >第1条连接</ a ></ li >< li > |
3 | < a href = "#" >第2条连接</ a ></ li >< li > |
4 | < a href = "#" >第3条连接</ a ></ li > |
5 | </ ul > |
解决方案4:(感谢.Roc Happyゞ提供的结局方案)
1 | * { padding : 0 ; margin : 0 ;} |
2 | li {} |
3 | li a { background : #CCC ; border-bottom : 1px #000 solid ; text-decoration : none ; display : block ; width : 100% } |
4 | li a:hover { background : #BBB ;} |
转载请注明转自《【IE6的疯狂之九】li在IE中底部空行的BUG》
相关文章推荐
- 【IE6的疯狂之九】li在IE中底部空行的BUG
- 【IE6的疯狂之九】li在IE中底部空行的BUG
- 【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)
- 【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)
- li在IE中底部空行的BUG
- li在IE中底部空行的BUG
- IE6 | IE7 li底部多出几像素bug
- 发现IE6、IE7下列表li中内联块级元素的错位bug
- CSS 列表 li 底部空行Bug
- li margin-bottom在IE6,7中底部3像素的BUG
- IE6|IE7中li底部3px间距BUG
- IE6、IE7中li底部3px间距BUG
- IE的CSS Bug列表(IE6,IE7和IE8)
- 【IE6的疯狂之三】IE6 3像素BUG的实例
- li中浮动元素span等在IE和Firefox中的高度Bug
- IE6 IE7 hasLayout bug之li间的3px垂直间距
- IE6,IE7下设置body{overflow:hidden;}失效Bug
- IE的CSS Bug列表(IE6,IE7和IE8)
- 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG(2010年3月30日更新)
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG