斷頭臺(tái)問題(IE/Win Guillotine bug)是國(guó)外的css設(shè)計(jì)者給這個(gè)問題起的一個(gè)非常形象的名字，就如同斷頭臺(tái)一樣，對(duì)象被無情的切斷了一部分，不過與之相反的是，斷頭臺(tái)問題中的對(duì)象切斷的不是對(duì)象的頭部，而是對(duì)象的底部。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è)計(jì)的目的是彌補(bǔ)HTML的不足，以強(qiáng)大的擴(kuò)展性滿足網(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)由三部分組成，一個(gè)是主對(duì)象#layput，主框架中有#left為左浮動(dòng)對(duì)象，右側(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的左浮動(dòng)及用于我們觀察的粗邊框效果，我們還是通過瀏覽器來查看問題是如何發(fā)生的，見圖。

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

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

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

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

解決方案
根據(jù)我們對(duì)這個(gè)問題產(chǎn)生原因理解，可以做出多套解決方案來應(yīng)付這類問題，首先我們知道，因?yàn)榉歉��?dòng)與浮動(dòng)對(duì)象都存在#layout中從而造成了這個(gè)問題，因此可以從浮動(dòng)方式上入手，把非浮動(dòng)對(duì)象也改為浮動(dòng)對(duì)象，這樣便可以解決這個(gè)問題，例如對(duì)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è)計(jì)的目的是彌補(bǔ)HTML的不足，以強(qiáng)大的擴(kuò)展性滿足網(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>

對(duì)鏈接加上一個(gè)div，并設(shè)置為浮動(dòng)對(duì)象：#right {float:left;}這樣使兩個(gè)對(duì)象都成了浮動(dòng)對(duì)象，因此不會(huì)引發(fā)問題。與此同時(shí)，也可以嘗試另一個(gè)思路來修復(fù)這個(gè)問題，高度不適應(yīng)問題在IE與Mozilla/Firefox瀏覽器中都存在，解決方案是通過一個(gè)空對(duì)象強(qiáng)制瀏覽器對(duì)高度進(jìn)行重新計(jì)算，在本例中也是由于IE瀏覽器的高度計(jì)算失敗造成的問題，因此不妨也增加對(duì)象嘗試達(dá)到目的，可以嘗試在#layout的最底部增加一個(gè)div來強(qiáng)制高度，代碼如下(演示)：
<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è)計(jì)的目的是彌補(bǔ)HTML的不足，以強(qiáng)大的擴(kuò)展性滿足網(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>

這樣一個(gè)清除浮動(dòng)對(duì)象的，會(huì)幫助瀏覽器重新找到合適的高度，從而解決了斷頭臺(tái)問題。