技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> IE6浮动引起的一些BUG

IE6浮动引起的一些BUG

浏览:2229次  出处信息
LI浮动之后换行

在一个没有设定宽度的浮动元素#floated里,有一个触发了hasLayout的子元素#content,并且#content没有设定宽度。那么#content和#floated会以100%的宽度呈现,占满这一行。例子:


(IE6的截图)

 
1 li {
2   float: left;
3   display: block;
4 }
5 li a {
6   display: block;
7   height: 30px;
8   margin-right: 10px;
9 }
 
1 <ul>
2   <li><a href="#">HELLO WORLD</a></li>
3   <li><a href="#">HELLO WORLD</a></li>
4   <li><a href="#">HELLO WORLD</a></li>
5   <li><a href="#">HELLO WORLD</a></li>
6   <li><a href="#">HELLO WORLD</a></li>
7   <li><a href="#">HELLO WORLD</a></li>
8 </ul>

在上面的例子中,a元素触发了hasLayout,但是没有设定宽度,在IE6里会产生换行。
解决办法有下面几种:

  • 给a或者li明确的宽度。
  • 让a元素也浮动。(可能会带来新的BUG
  • 去掉height,也就是不触发hasLayout。(可能会带来新的BUG
LI中的浮动元素以阶梯的方式呈现

继续用上面的HTML做为例子,CSS变为:

1 ul {
2   list-style: none;
3 }
4 li a {
5   float: left;
6   height: 30px;
7   margin-right: 10px;
8 }

(IE6的截图)

在标准浏览器下,如果有足够的宽度,例子中所有的a元素会构成一行。但是在IE6下面,a元素是以阶梯的方式呈现。解决的办法有下面几种:

  • 给li加上display: inline;。
  • 让li也浮动。
浮动元素文本换行

上图中的li没有设置宽度,当容器的宽度不够时,正常情况下应该是li下沉,另起一行。但是在IE6下面却是li里面的文本换行,导致混乱的布局。下面是产生BUG的CSS:

 
1 ul {
2   list-style: none;
3 }
4 li {
5   float: left;
6 }
7 li a {
8   margin-right: 10px;
9 }

(IE6的截图)

解决的办法有下面几种:

  • 加上white-space: nowrap;
  • 给浮动元素(上面的例子为li)一个确切的宽度值。
  • 在IE6下用hack,让li以inline-block的方式呈现。(如果display: inline-block不起作用,点击这里

建议继续学习:

  1. 解决IE6从Nginx服务器下载图片不Cache的Bug    (阅读:7169)
  2. 浮动引起的文本重影    (阅读:4018)
  3. IE6下position:absolute相邻元素margin-top失效的bug    (阅读:3077)
  4. OverFlow -- 创建BFC,清除浮动    (阅读:2999)
  5. 让IE6支持min-width    (阅读:2850)
  6. IE6中a标签location.href失效解决方法    (阅读:2426)
  7. IE6下appendChild的一个小问题。    (阅读:2241)
  8. IE双倍浮动边界Bug    (阅读:2155)
  9. CSS 简易浮动清除方法讨论    (阅读:2000)
  10. 这到底是谁之错?    (阅读:1492)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1