问题起因
断头台问题(IE/Win Guillotine Bug)是国外的CSS设计者给这个问题起的一个非常的名称，就如同断头台一样，对象被无情的切断了一部分，不过与此相反的是，断头台问题中的对象切断的不是对象的头部，而是对象的底部。
这段XHTML代码结构由三部分组成，一个是主对象#layout，主框架中有#1eft为左浮动对象，孑右侧为普通的链接文字，类似于左右分栏的二栏式的布局。CSS代码部分，我们主要设置了链接的背景色，#left的左浮动，及用于我们观察的粗边框效果，我们还是通过浏览器来查看问题是如何发生的，这里列出了网页效果的两个状态，当网页被打开时，页面显示正常，与CSS编码中所指定的样式完全一致，而当鼠标指向对象右侧的“链接3”及“链接4”时，问题出现了，主#layout下面被切掉了，而剩下的高度刚好正是4个链接的高度。与此同时，当鼠标再次回到链接1时候，#layout对象的高度又恢复了正常。这便是本节中的断头台问题。天津网站建设，天津网站制作，天津做网站，天津网站优化
笔者在实际开发中曾经碰到过一个这样的问题，类似于这种布局的情况很容易发生，例、如左侧是网页主体，右侧是垂直导航时，就与此情况类似，但这还不是弓泼这个问题的核心原因，引发这个问题的主要原因在于链接上，注意本例中的代码，链接的a:hovcr状态下，被设置了background-color:#fff;背景改变为白色，我们不妨尝试去除这段样式代码，司眇，如果不带这句样式，页面是不会出现问题的，因此原因就在于a对象的a:hover状态。经过测试后，我们可以发现不仅仅是background-colo的变化，如果改变链接的其他属性，也会引发同样的问题，例如：padding，border，加粗，斜体等，都会发生断头台问题。天津制冷设备维修 | 天津空调维修 | 天津空调拆装
另外值得注意的是，#layout中，对象是一个浮动对象，而右侧的链接则是非浮动对象，对于未指定高度的对象而言，浏览器会根据其中的所有内容，不管是非浮动的还是浮动的实际大小计算其高度，而当例子中的链接对象是一个非浮动对象，并且具有.hover变border、background及padding属性时，IE会认为这些属性会改变#layout的高度，但令人失望的是IE的这个行为并没有达到预期目的，它会把非浮动对象的高度作为总高度给了#layout，从而切断了#1eft的内容。基于这样一些问题的产生原因，解决方案应当可以非常方便的做出。