IE6断头台问题

来源：互联网发布：我的第一本淘宝开店书编辑：程序博客网时间：2024/06/05 16:20

这也是从书本中学习到的,就写写吧.

先看下面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

a:hover{background-color:#ccc;}

#layout{

border:#35BB0C 5px solid;

width:400px;

background-color:#f2f2f2;

}

#left{

border:#D4CA25 5px solid;

width:200px;

float:left;

background-color:#fff;

}

a{display:block;}

</style>

</head>

<body>

<p>目前推荐遵循的是W3c于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局，桢和其它表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。</p>

</div>

</div>

</body>

</html>

打开IE6,测试后,发现当鼠标移到连接2,3,4上时,发现div被砍掉一半,这就是IE6的一个著名的bug"断头台".

用号称最能支持css的firefox打开这个网页,发现背部的框的低部只去到连接4,说明背部的框的高度就只有连接1到连接4这个高度.很明显,IE的错误就在与此,它一开始并没有马上让高度和连接1到连接4的总高度对等,而是直接先等于一个浮动的框的高度,而事实上,载体的高度不应该与里面的浮动体的高度产生关系,所以当鼠标移动到连接2,3,4上时,发生一些计算的错误,导致框的高度在后来发生了变化.

要解决这个问题,书本提供的方法存在一点多余和累赘的成分,经过测试,其实从问题出发会找到更好的解决方案.在之前的分析就已经知道,问题的关键在于背景框高度的计算.所以,要解决这个问题,根本就是要让背景框的高度得到正确的计算.由此,这个问题又演变成"高度不能自适应"问题了.我发现,只要让背景框的底部能达到正确的长度即可,所以我在最下面(连接4的标签下面)加入一个占位框<div class="clear-div"></div>,只要让这个占位框在原来不应该计高度的的底部存在占位即可,所以加入CSS语句:.clear-div{height:0;overflow:hidden;clear:left;}其中最重要的是clear:left,这个语句可以使其占位框真正位于最下方.经过测试后,成功通过.