您的位置：首页 > 其它

【IE6的疯狂之九】li在IE中底部空行的BUG

2011-09-27 14:29 330 查看
曾经写过【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题），原文地址：http://www.css88.com/archives/421；

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
>
CSS代码：

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
;}
查看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：

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
;}
就是在li a 样式中加入zoom:1；

解决方案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
;}
就是在li 样式中加入display:inline ；

解决方法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
>
就是将<li>标签写成一行；

解决方案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
;}
就是在li a 样式中加入width:100%或者一个宽度值；

声明:本文采用 BY-NC-SA 协议进行授权
| WEB前端开发

转载请注明转自《【IE6的疯狂之九】li在IE中底部空行的BUG》
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航