IE断头台问题的解决办法

14132011-05-31

断头台问题(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>

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

 

通过本文您对西安网站建设有了进一步了解,本公司温馨提醒:找西安做网站公司,请选择手续齐全、业务精、服务好的正规公司。

工商网上亮照

版权所有:西安点墨网络科技有限公司 信息备案编号: 陕ICP备11004160号-1

客户服务电话:15229292610

公司注册地址:西安市雁塔区融鑫路丽湾蓝岛1幢3单元16层31605号

临时办公地址:西安市雁塔区朱雀大街紫郡长安F3

Sitemap 网站地图 手机版

服务热线:15229292610

客服信箱:vip@dianmo.cc

846461336327

版权所有:西安点墨网络科技有限公司 信息备案编号: 陕ICP备11004160号-1