IE斷頭臺的解決辦法_Div+CSS教程

斷頭臺問題(IE/Win Guillotine bug)是國外的css設(shè)計者給這個問題起的一個非常形象的名字，就如同斷頭臺一樣，對象被無情的切斷了一部分，不過與之相反的是，斷頭臺問題中的對象切斷的不是對象的頭部，而是對象的底部。xhtml編碼(演示)：
<div id="layout">
<div id="left">
<strong>XML</strong>
<p>前推薦遵循的是W3C于2000年10月6日發(fā)布的XML1.0和HTML一樣，XML同樣來源于SGML，但XML是一種能定義其它語言的語。<br /><br /> XML最初設(shè)計的目的是彌補HTML的不足，以強大的擴展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，后來逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。</p>
</div>
<a href="#">鏈接1</a>
<a href="#">鏈接2</a>
<a href="#">鏈接3</a>
<a href="#">鏈接4</a>
</div>
</div>

這段代碼結(jié)構(gòu)由三部分組成，一個是主對象#layput，主框架中有#left為左浮動對象，右側(cè)為普通的鏈接文字，類似于左右分欄的二欄式布局。css編碼：
a:hover {
background-color:#fff;
}
#layout {
border: #35bb0c 5px solid;
width: 400px;
background-color: #f2f2f2;
}
#left {
border: #d4ca25 5px solid;
width: 200px;
float: left;
background-color:#fff;
}

在css代碼部分，我們主要設(shè)置了鏈接的背景色、#left的左浮動及用于我們觀察的粗邊框效果，我們還是通過瀏覽器來查看問題是如何發(fā)生的，見圖。

這里列出了網(wǎng)頁效果的兩種狀態(tài)，當網(wǎng)頁被打開時，頁面顯示正常，與css編碼中所指定的樣式完全一致，而當鼠標指向?qū)ο笥覀?cè)的"鏈接3"及"鏈接4"時，問題出現(xiàn)了，主對象#layout下面被切掉了，而剩下的高度剛好正是4個鏈接的高度。與此同時當鼠標再次回到"鏈接1"時，#layout對象的高度又恢復(fù)了正常。這便是斷頭臺問題。

筆者在實際開發(fā)中曾經(jīng)遇到過一個這樣的問題，類似于這種布局的情況很容易發(fā)生，例如左側(cè)是網(wǎng)頁主體右側(cè)是垂直導(dǎo)航時就與此情況類似，但這還不是引發(fā)這個問題的核心原因，引發(fā)這個問題的原因在于鏈接上，注意本例中的代碼，鏈接的a:hover狀態(tài)下被設(shè)置了background-color:fff;背景改變?yōu)榘咨�，我們不妨去嘗試去除這段樣式代碼可以發(fā)現(xiàn)，如果不帶這句樣式頁面是不會出現(xiàn)問題的，因此原因就在于a對象的a:hover狀態(tài)。

經(jīng)過測試后，我們可以發(fā)現(xiàn)不僅僅是background-color的變化，如果改變a：hover狀態(tài)下鏈接的其它屬性，也會引發(fā)其它的問題，例如padding、border、加粗、斜體等，都會引發(fā)斷頭臺問題。

另外值得注意的是，#layout之中，#left對象是一個浮動對象，而右側(cè)的鏈接則是非浮動對象，對于未指定高度的對象而言，IE瀏覽器會根據(jù)其中的所有內(nèi)容，不管是非浮動的還是浮動的實際大小計算其高度，而當例子中的鏈接對象是一個非浮動對象，并且具有hover改變border、background及padding屬性時，IE會認為這些屬性會改變#layout的高度，因此重新計算對象高度，但是令人失望的IE的這個行為并沒有達到預(yù)期目的，它會把非浮動對象的高度作為總高度給了#layout，從而切斷了#left的內(nèi)容�；�于這樣一些問題產(chǎn)生的原因，解決方案應(yīng)當可以非常方便的做出。

解決方案
根據(jù)我們對這個問題產(chǎn)生原因理解，可以做出多套解決方案來應(yīng)付這類問題，首先我們知道，因為非浮動與浮動對象都存在#layout中從而造成了這個問題，因此可以從浮動方式上入手，把非浮動對象也改為浮動對象，這樣便可以解決這個問題，例如對xhtml做如下修改(演示)：
<div id="layout">
<div id="left"><strong>XML</strong>
<p>前推薦遵循的是W3C于2000年10月6日發(fā)布的XML1.0和HTML一樣，XML同樣來源于SGML，但XML是一種能定義其它語言的語。<br /><br /> XML最初設(shè)計的目的是彌補HTML的不足，以強大的擴展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，后來逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。</p>
</div>
<div id="right">
<a href="#">鏈接1</a>
<a href="#">鏈接2</a>
<a href="#">鏈接3</a>
<a href="#">鏈接4</a>
</div>
</div>

對鏈接加上一個div，并設(shè)置為浮動對象：#right {float:left;}這樣使兩個對象都成了浮動對象，因此不會引發(fā)問題。與此同時，也可以嘗試另一個思路來修復(fù)這個問題，高度不適應(yīng)問題在IE與Mozilla/Firefox瀏覽器中都存在，解決方案是通過一個空對象強制瀏覽器對高度進行重新計算，在本例中也是由于IE瀏覽器的高度計算失敗造成的問題，因此不妨也增加對象嘗試達到目的，可以嘗試在#layout的最底部增加一個div來強制高度，代碼如下(演示)：
<div id="layout">
<div id="left"><strong>XML</strong>
<p>前推薦遵循的是W3C于2000年10月6日發(fā)布的XML1.0和HTML一樣，XML同樣來源于SGML，但XML是一種能定義其它語言的語。<br /><br /> XML最初設(shè)計的目的是彌補HTML的不足，以強大的擴展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，后來逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。</p>
</div>
<a href="#">鏈接1</a>
<a href="#">鏈接2</a>
<a href="#">鏈接3</a>
<a href="#">鏈接4</a>
</div>
<div style="clear: both"></div>

這樣一個清除浮動對象的，會幫助瀏覽器重新找到合適的高度，從而解決了斷頭臺問題。