IE6浮动引起的一些BUG
浏览:2214次 出处信息
- 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里会产生换行。
解决办法有下面几种: - 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不起作用,点击这里)
建议继续学习:
- 解决IE6从Nginx服务器下载图片不Cache的Bug (阅读:7099)
- 浮动引起的文本重影 (阅读:4003)
- IE6下position:absolute相邻元素margin-top失效的bug (阅读:3062)
- OverFlow -- 创建BFC,清除浮动 (阅读:2989)
- 让IE6支持min-width (阅读:2828)
- IE6中a标签location.href失效解决方法 (阅读:2409)
- IE6下appendChild的一个小问题。 (阅读:2226)
- IE双倍浮动边界Bug (阅读:2141)
- CSS 简易浮动清除方法讨论 (阅读:1989)
- 这到底是谁之错? (阅读:1479)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:多栏自适应布局问题浅谈
后一篇:IE6,IE7中负缩进的问题 >>
文章信息
- 作者:小寒 来源: 记事本
- 标签: IE6 浮动
- 发布时间:2010-08-13 09:50:06
建议继续学习
近3天十大热文
- [53] IOS安全–浅谈关于IOS加固的几种方法
- [52] 如何拿下简短的域名
- [51] 图书馆的世界纪录
- [50] android 开发入门
- [50] Oracle MTS模式下 进程地址与会话信
- [49] Go Reflect 性能
- [46] 【社会化设计】自我(self)部分――欢迎区
- [46] 读书笔记-壹百度:百度十年千倍的29条法则
- [36] 程序员技术练级攻略
- [29] 视觉调整-设计师 vs. 逻辑