淺析CSS中的haslayout

標籤：io   os   使用   sp   div   on   問題   bs   ef   

      作為一名web開發人員，最大的希望不是自己的水平有多高，而是希望瀏覽器廠家能夠統一標準，相信任何一個只要是接觸過web程式開發的人員都有那樣的感受，就是瀏覽器之間的相容性問題總是讓我們的工作平添諸多的麻煩，就拿一個簡單的ajax來說，IE和DOM之間的獲得ajax對象的方式就有很多的差別，還有就是有一些的效果在某些瀏覽器上面根本就得不到很好的支援，從而造成了混亂以及重複累贅的工作。下面我們要講述的haslayout就是IE的特殊產物。

      首先明確一個概念，haslayout 是Windows Internet Explorer渲染引擎的一個內部組成部分。在InternetExplorer中，一個元素要麼自己對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。為了調節這兩個不同的概念，渲染引擎採用了 hasLayout 的屬性，屬性值可以為true或false。當一個元素的 hasLayout屬性值為true時，我們說這個元素有一個布局（layout），但是現在哦haslayout在IE8以及後面更高的版本中取消了，其只針對IE8一下的版本有效。

     為什我們要提到haslayout呢？它究竟有什麼作用呢？我們知道只有當一個元素有了haslayout屬性之後，他才可以對自身以及對其子項目的尺寸和定位進行計算的能力，就是說如果它的其中一個子項目有自己的定位的話，這個子項目就將負責計算自己以及自己子項目的尺寸，但是這個子項目的定位將受到其父元素的影響。

    還有一些元素他們擁有自己特有的長和高，即使沒有定義他們的長和高，比如說button，inputs等等，這就說明他們與生俱來的haslayout屬性，既然有元素是與生俱來的，那肯定與之對應的就是我們的後天形成了，這裡就要提到通過我們後天設定一些特別的css樣式來觸發layout，當然這個就像我們的炸彈一樣，一旦觸發就不可能修改。這些元素包括div span等。

   這裡如果擁有了layout之後，這些元素就被限制在了一個獨立的盒子中了，這一點和我們的bfc很像，通過這樣，我們的元素就不會影響到外部的元素，而自身也不會受到外部元素的影響。這就是所謂的一旦有了layout就觸發了bfc，將自己鎖起來了。這樣也有一個弊端，就是被鎖起來之後，該元素就無法自適應了，也不會適應別的元素，於是乎就可能產生一些怪異現象，甚至影響整個的布局。

     下面將介紹一些重設haslayout的方法，

　　* width , height ( 設為 auto )

　　* max-width , max-height ( 設為 none ) [ IE7 ]

　　* position ( 設為 static )

　　* float ( 設為 none )

　　* overflow ( 設為 visible )

　　* zoom ( 設為 normal )

通過這些的話，可以重設我們的haslayout屬性。還有一些就是怎麼啟用這個屬性，下面將羅列一些常見的：

只需要將position: absolute設定絕對位置可能會引發新的問題。float: left|rightIE下的浮動也會產生一些莫名其妙的問題。display: inline-block當一個內嵌元素需要haslayout屬性時就需要用它，但是IE本身不支援inline-block的，只是表現得像標準裡說的inline-block。width: 除‘auto‘外的任意值優先考慮使用該屬性。height: 除‘auto‘外的任意值對 IE6 及更早版本來說很常用，該方法被稱為霍莉破解(Holly hack)，即設定這個元素的高度為 1% (height:1%;)。但是要注意，當這個元素的 overflow 屬性被設定為 visible 時，這個方法就失效了。zoom: 除‘normal‘外的任意值又一個ie私人屬性，不相容標準。zoom:1可以在測試或者不追求標準的情況下使用，效果不錯。writing-mode: tb-rlie私人屬性，不推薦用。

 

淺析CSS中的haslayout