瀏覽器bug和修復2

　　擁有佈局

　　Window IE上的bug要比其餘瀏覽器多，緣由之一是，IE的顯示引擎使用一個稱爲佈局(layout)的內部概念。由於佈局是專門針對顯示引擎內部工做方式的概念，因此通常狀況下不須要了解它，可是，佈局問題是許多IE/Win顯示bug的根源，因此理解這個概念以及它如何影響CSS是有幫助的。

　什麼是佈局

　　Windows上的IE使用佈局概念來控制元素的尺寸和定位。那些稱爲擁有佈局(have layout)的元素負責自己及其子元素的尺寸和定位。若是一個元素沒有擁有佈局，那麼它的尺寸和位置由最近的擁有佈局的祖先元素來控制。

　　IE顯示引擎利用佈局概念減小它的處理開銷，在理想狀況下，全部元素都控制本身的尺寸和定位。可是，這會在IE中致使很大的性能問題。所以，IE/Win開發團隊決定只將佈局應用於那些實際須要它的元素，這樣就能夠充分的減小布局開銷。

 

---

　在默認狀況下擁有佈局的元素：

• body
• 標準模式的html
• table
• tr、td
• img
• hr
• input、select、textarea、button
• iframe、embed、object、applet
• marquee

---

　　佈局概念是IE上特有的，並且它不是CSS屬性。儘管某些CSS屬性會使元素擁有佈局，可是在CSS中沒法顯示的設置佈局。可使用Javascript函數hasLayout查看一個元素是否擁有佈局。若是擁有佈局，這個函數就返回true，不然返回false。hasLayout是一個只讀屬性，因此沒法使用Javascript進行設置。

---

　　設置如下CSS屬性會自動的使元素擁有佈局：

• position: absolute
• float:left或right
• display: inline-block
• width: 任何值
• height: 任何值
• zoom: 任何值（Microsoft屬性----不能經過檢查）
• writing-mode: tb-r1 （Microsoft屬性----不能經過檢查）

---

　佈局有什麼效果

　　佈局時許多IE/Win顯示bug的根源。例如，一個文本段落靠着一個浮動元素，那麼指望這個文本環繞這個元素。可是在IE6和更低版本中，若是給段落設置了高度，那麼這個段落就擁有了佈局，因而它就被限制爲矩形，阻止了文本環繞浮動元素，這會致使浮動佈局的各類問題。

　　另外一個問題涉及擁有佈局元素如何肯定本身的尺寸。若是元素的內容變得比元素自己大，那麼指望內流到元素外，可是，在IE6和更低版本中，擁有佈局的元素會擴展自身的尺寸以適應內容。因此，在IE中width更像min-width，尤爲是當浮動框的內容迫使框的寬度增長時，框的寬度對於可用寬度來講太大了，這個框就會降低到其餘框的下面。

 

---

 

　　其餘問題還包括：

• 擁有佈局的元素不進行收縮
• 佈局元素對浮動進行自動清理
• 相對定位元素不得到佈局
• 在擁有佈局的元素之間空白邊不疊加
• 在不擁有佈局的塊級連接上，單擊區域只覆蓋文本

 

---

 

 　常見的bug和修復方法　

　　CSS開發人員最重要的技能之一是發現常見瀏覽器bug的能力。經過了解致使這些bug的各類元素，能夠在它們形成問題以前發現而且修復它們。

　雙空白邊浮動bug

　　最多見且最容易發現的bug之一是IE6和更低版本中的雙空白邊浮動bug。顧名思義，這個Windows bug使任何浮動元素上的空白邊加倍。

 　　這個bug很容易修復，將元素的display屬性設置爲inline就能夠了。由於元素是浮動的，因此將display設置爲inline實際上不會影響顯示方式。可是，這彷佛會阻止IE 6和更低版本將全部的空白邊加倍。這是一個很是容易發現和修復的bug：每當對具備對平空白邊的元素進行浮動時，都應該很天然的將display屬性設置爲inline。

　3像素文本偏移bug

　　另外一個很是常見的IE5-6/Win bug是3像素文本偏移bug：當文本與一個浮動元素相鄰時，這個bug就會表現出來。例如，假設將一個元素向左浮動，而且不但願相鄰的段落文本圍繞浮動元素，你可能會在段落應用左空白邊，其寬度等於浮動元素的寬度：

.myFloat {
float: left;
width: 200px;
}

p {
margin-left: 200px;
}

　　若是這麼作，在文本和浮動元素之間就會出現一個莫名其妙的3像素間隙：

 　　修復這個bug要左右開弓，首先，給包含文本的元素設置任意的高度，這會迫使元素擁有佈局，由於在IE6和更低版本上height的效果等同於min-height，因此設置一個小的高度不會影響元素在這些瀏覽器裏的實際尺寸，可是，會影響其餘瀏覽器，因此要針對Windows上的IE6和更低版本才使用這個規則：

/* Hide from IE5-mac, only IE-Win see this \*/
* html p {
height: 1%;
}
/*End hide from IE5-mac */

　　不幸的是，這麼作會致使另一個問題，擁有佈局的元素會被限制爲矩形，而且出如今浮動元素的旁邊而不是下面，添加200像素的空白邊實際上會在IE5/6中使浮動元素和段落之間產生200像素的間隙。爲了不這個間隙，須要從新把空白邊設置爲零：

/* Hide from IE5-mac, only IE-Win see this \*/
* html p {
height: 1%;
margin-left: 0;
}
/*End hide from IE5-mac */

　　這樣，文本偏移被修復了，可是如今另一個3像素的間隙出現了，這一次是在浮動元素上。爲了去掉這個間隙，須要在浮動元素上設置一個負值的3像素右空白邊：

/* Hide from IE5-mac, only IE-Win see this \*/
* html p {
height: 1%;
margin-left: 0;
}

* html .myFloat {
margin-right: -3px;
}
/*End hide from IE5-mac */

　　若是浮動元素是除了圖像以外的其餘元素，那麼這個問題已經被修復了。可是，若是浮動元素是圖像，那麼還有最後一個問題須要解決。IE 5/Win在圖像的左右都添加了3像素的間隙，而IE6不改變圖像的空白邊。所以，須要一個招數只在IE5/Win上去掉3像素的間隙：

/* Hide from IE5-mac, only IE-Win see this \*/
* html p {
height: 1%;
margin-left: 0;
}

* html .myFloat {
margin: 0  -3px;
ma\rgin: 0;
}
/*End hide from IE5-mac */

　　這會解決問題，可是採用的方式複雜並且難看，所以，若是可能的話，最好將這些規則分別放進單獨的瀏覽器特定的樣式表中。若是這樣作，在IE5的樣式以下：

p {
height: 1%;
margin-left: 0;
}

img.myFloat {
margin: 0 -3px;
}

　　用於IE6的樣式以下：

p {
height: 1%;
margin-left: 0;
}

img.myFloat {
margin: 0;
}