IE的haslayout觸發

layout是Windows上IE產生許多Bug的根源。若是在IE上遇到一個bug,能夠嘗試下強迫元素擁有layout。css

啥是layout(佈局)了?
layout是windows上的IE特有的東西,但它不是css屬性。擁有layout的元素負責自己及其子元素的尺寸和定位;html

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

能夠用JavaScript函數hasLayout來查看一個元素是否擁有layout。app

在默認狀況下擁有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)連接上,單擊區域只覆蓋文本orm

相關文章
相關標籤/搜索