layout是Windows上IE产生许多Bug的根源。如果在IE上遇到一个bug,可以尝试下强迫元素拥有layout。

啥是layout(布局)了?
layout是windows上的IE特有的东西,但它不是css属性。拥有layout的元素负责本身及其子元素的尺寸和定位;

而不拥有layout的元素,它的尺寸和位置会由最近拥有layout的父元素控制。

可以用JavaScript函数hasLayout来查看一个元素是否拥有layout。

在默认情况下拥有layout的元素包括:
body
标准模式中的html
table
tr/td
img
hr
input/select/textarea/button
iframe/embed/object/applet
marquee

设置以下css属性会自动地使元素拥有layout:
position: absolute 或 fixed
float: left 或 right
display: table 或 table-cell 或 inline-block 或 inline-table
overflow: hidden 或 scroll 或 auto(IE7会,IE6不会)
width:除 “auto” 之外的任何值
height:除 “ auto” 之外的任何值
min-width:任何值(IE6不支持此属性)
max-width:除 “none” 之外的任何值(IE6不支持此属性)
min-height:任何值(IE6不支持此属性)
max-height:除 “none” 之外的任何值(IE6不支持此属性)
zoom:除 “normal” 外的任何值(Microsoft属性——不能通过W3C检验)
writing-mode:tb-rl(Microsoft属性——不能通过W3C检验)

layout产生的影响:
拥有layout的元素是IE产生浮动Bug的根源
拥有layout的文本元素不会围绕浮动元素
拥有layout的元素不进行收缩
layout元素对浮动进行自动清理
拥有layout的列表元素(ul/ol/dl/li)会表现异常
拥有layout的元素背景图像定位(background-position)会产生偏差
相对定位(position: relative)的元素不能获得layout
拥有layout的元素之间外边距(margin)不叠加
在不拥有layout的块级(display:block)链接上,单击区域只覆盖文本


Asrocky
420 声望36 粉丝

引用和评论

0 条评论