IE瀏覽器的haslayout屬性和相關兼容性問題怎么解決?解決方法分享

IE,這個令所有網站設計人員討厭,但又不得不為它工作的瀏覽器 。不論是6、7還是8,它們都有一個共同的渲染標準haslayout,所以haslayout 是一個非常有必要徹底弄清除的概念 。大多 數IE下的顯示錯誤,就是源于它 。
什么是Layout呢?
"Layout" 是 IE 的一個私有屬性 , 并不是W3C標準 。它決定了一個對象(就是一個標簽div、li等)在內容中如何顯示、與周圍對象的位置關系、以及怎樣響應程序或用戶產生的事件 。
這個屬性可以被一些css強制激活 。一些HTML標簽默認具有haslayout 。
PS:一個對象的layout屬性被激活,它的具體表現就是haslayout=true 。我們可以用IE Developer Toolbar工具看到被激活的對象帶有"haslayout = -1"的屬性 。
下面這些標簽默認擁有haslayout屬性:

IE瀏覽器的haslayout屬性和相關兼容性問題怎么解決?解決方法分享

你可能就問:微軟干嘛要設layout這個東西呢?當一個對象的layout被激活時,它以及它的子對象的定位和尺寸計算將獨立進行 , 不受附近對象 的干擾 。也就是說它擁有一個獨立的布局(layout) 。因此瀏覽器要花費更多的代價來處理擁有haslayout的對象 。為了提高性能,微軟增加了 layout這個IE私有的概念 。
怎樣激活layout?
下面列出的css屬性可以激活對象的layout:
IE瀏覽器的haslayout屬性和相關兼容性問題怎么解決?解決方法分享

設置絕對定位可能會引發新的問題 。
IE瀏覽器的haslayout屬性和相關兼容性問題怎么解決?解決方法分享

IE下的浮動也會產生一些莫名其妙的問題 。
IE瀏覽器的haslayout屬性和相關兼容性問題怎么解決?解決方法分享

當一個內聯元素需要haslayout屬性時就需要用它,但是IE本身不支持inline-block的,只是表現得像標準里說的inline-block 。
1.width: 除'auto'外的任意值
優先考慮使用該屬性 。
2.height: 除'auto'外的任意值
對 IE6 及更早版本來說很常用,該方法被稱為霍莉破解(Holly hack),即設定這個元素的高度為 1% (height:1%;) 。但是要注意,當這個元素的 overflow 屬性被設置為 visible 時 , 這個方法就失效了 。
3.zoom: 除'normal'外的任意值
又一個ie私有屬性,不兼容標準 。zoom:1可以在測試或者不追求標準的情況下使用,效果不錯 。
IE瀏覽器的haslayout屬性和相關兼容性問題怎么解決?解決方法分享

ie私有屬性,不推薦用 。
IE7 還有一些額外的屬性:
1.min-height: (任意值)
2.max-height: (除 none 外任意值)
3.min-width: (任意值)
4.max-width: (除 none 外任意值)
5.overflow: (除 visible 外任意值)
6.overflow-x: (除 visible 外任意值)
【IE瀏覽器的haslayout屬性和相關兼容性問題怎么解決?解決方法分享】7.overflow-y: (除 visible 外任意值)
8.position: fixed
重置haslayout
在沒有其它屬性激活layout的情況下,使用下面的css可以重置haslayout屬性:
1.width, height (設為 "auto")
2.max-width, max-height (設為 "none")(在 IE 7 中)
3.position (設為 "static")
4.float (設為 "none")
5.overflow (設為 "visible") (在 IE 7 中)
6.zoom (設為 "normal")
7.writing-mode (從 "tb-rl" 設為 "lr-t")
display 屬性的不同:當用"inline-block"激活了haslayout 屬性時,就算在一條獨立的規則中覆蓋這個屬性為"block"或"inline",haslayout 這個標志位也不會被重置為 false 。
把 mid-width, mid-height 設為它們的默認值"0"仍然會賦予 hasLayout , 但是 IE 7 卻可以接受一個不合法的屬性"auto"來重置 hasLayout 。
觸發 hasLayout 清除浮動
樣例:
IE瀏覽器的haslayout屬性和相關兼容性問題怎么解決?解決方法分享


IE瀏覽器的haslayout屬性和相關兼容性問題怎么解決?解決方法分享


IE瀏覽器的haslayout屬性和相關兼容性問題怎么解決?解決方法分享

'Layout' 是 IE 的專有概念,它決定了元素如何對其內容進行定位和尺寸計算,與其他元素的關系和相互作用,以及對應用還有使用者的影響 。
'Layout' 可以被某些 CSS property(特性)不可逆的觸發,而某些 HTML 元素本身就具有 layout。
'Layout' 在 IE 中可以通過 hasLayout 屬性來判斷一個元素是否擁有 layout,如 object.currentStyle.hasLayout。
'Layout' 是 IE 瀏覽器渲染引擎的一個內部組成部分 。在 IE 瀏覽器中,一個元素要么自己對自身的內容進行組織和計算大?。?要么依賴于包含塊來計算尺寸和組織內容 。為了協調這兩種方式的矛盾,渲染引擎采用了 'hasLayout' 屬性 , 屬性值可以為 true 或 false 。當一個元素的 'hasLayout' 屬性值為 true 時,我們說這個元素有一個布局(layout),或擁有布局 。


相關經驗推薦