IE断头台的解决办法_Div+CSS教程

断头台问题(IE/Win Guillotine bug)是国外的css设计者给这个问题起的一个非常形象的名字，就如同断头台一样，对象被无情的切断了一部分，不过与之相反的是，断头台问题中的对象切断的不是对象的头部，而是对象的底部。xhtml编码(演示)：
<div id="layout">
<div id="left">
<strong>XML</strong>
<p>前推荐遵循的是W3C于2000年10月6日发布的XML1.0和HTML一样，XML同样来源于SGML，但XML是一种能定义其它语言的语。<br /><br /> XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。</p>
</div>
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
</div>
</div>

这段代码结构由三部分组成，一个是主对象#layput，主框架中有#left为左浮动对象，右侧为普通的链接文字，类似于左右分栏的二栏式布局。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代码部分，我们主要设置了链接的背景色、#left的左浮动及用于我们观察的粗边框效果，我们还是通过浏览器来查看问题是如何发生的，见图。

这里列出了网页效果的两种状态，当网页被打开时，页面显示正常，与css编码中所指定的样式完全一致，而当鼠标指向对象右侧的"链接3"及"链接4"时，问题出现了，主对象#layout下面被切掉了，而剩下的高度刚好正是4个链接的高度。与此同时当鼠标再次回到"链接1"时，#layout对象的高度又恢复了正常。这便是断头台问题。

笔者在实际开发中曾经遇到过一个这样的问题，类似于这种布局的情况很容易发生，例如左侧是网页主体右侧是垂直导航时就与此情况类似，但这还不是引发这个问题的核心原因，引发这个问题的原因在于链接上，注意本例中的代码，链接的a:hover状态下被设置了background-color:fff;背景改变为白色，我们不妨去尝试去除这段样式代码可以发现，如果不带这句样式页面是不会出现问题的，因此原因就在于a对象的a:hover状态。

经过测试后，我们可以发现不仅仅是background-color的变化，如果改变a：hover状态下链接的其它属性，也会引发其它的问题，例如padding、border、加粗、斜体等，都会引发断头台问题。

另外值得注意的是，#layout之中，#left对象是一个浮动对象，而右侧的链接则是非浮动对象，对于未指定高度的对象而言，IE浏览器会根据其中的所有内容，不管是非浮动的还是浮动的实际大小计算其高度，而当例子中的链接对象是一个非浮动对象，并且具有hover改变border、background及padding属性时，IE会认为这些属性会改变#layout的高度，因此重新计算对象高度，但是令人失望的IE的这个行为并没有达到预期目的，它会把非浮动对象的高度作为总高度给了#layout，从而切断了#left的内容。基于这样一些问题产生的原因，解决方案应当可以非常方便的做出。

解决方案
根据我们对这个问题产生原因理解，可以做出多套解决方案来应付这类问题，首先我们知道，因为非浮动与浮动对象都存在#layout中从而造成了这个问题，因此可以从浮动方式上入手，把非浮动对象也改为浮动对象，这样便可以解决这个问题，例如对xhtml做如下修改(演示)：
<div id="layout">
<div id="left"><strong>XML</strong>
<p>前推荐遵循的是W3C于2000年10月6日发布的XML1.0和HTML一样，XML同样来源于SGML，但XML是一种能定义其它语言的语。<br /><br /> XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。</p>
</div>
<div id="right">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
</div>
</div>

对链接加上一个div，并设置为浮动对象：#right {float:left;}这样使两个对象都成了浮动对象，因此不会引发问题。与此同时，也可以尝试另一个思路来修复这个问题，高度不适应问题在IE与Mozilla/Firefox浏览器中都存在，解决方案是通过一个空对象强制浏览器对高度进行重新计算，在本例中也是由于IE浏览器的高度计算失败造成的问题，因此不妨也增加对象尝试达到目的，可以尝试在#layout的最底部增加一个div来强制高度，代码如下(演示)：
<div id="layout">
<div id="left"><strong>XML</strong>
<p>前推荐遵循的是W3C于2000年10月6日发布的XML1.0和HTML一样，XML同样来源于SGML，但XML是一种能定义其它语言的语。<br /><br /> XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。</p>
</div>
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
</div>
<div style="clear: both"></div>

这样一个清除浮动对象的，会帮助浏览器重新找到合适的高度，从而解决了断头台问题。