IE6的CSS可变高度问题答案

【问题标题】：CSS variating height problem with IE6IE6的CSS可变高度问题
【发布时间】：2010-11-02 19:00:09
【问题描述】：

我在 IE6 上定位左侧边栏（可变高度 DIV）时遇到问题。

主要需求： 1. 我不能设置高度值，因为高度是变化的，应该由浏览器计算。 2. 侧边栏必须有顶部和底部的间距。

顶栏问题通过将位置替换为相对来解决。

有什么想法吗？提前谢谢你！

您可以在下面看到简化的代码并快照它在标准浏览器上的外观。

.container {
    left: 550px; 
    top: 10px; 
    width: 196px; 
    position: absolute; 
    line-height: 0px; 
    font-size: 1px;
}
.inner {
    width: 100%; 
    height: 114px; 
    background-color: rgb(227, 227, 227);
}
.leftbar {
    left: 0px; 
    top: 7px; 
    bottom: 7px; 
    width: 4px; 
    position: absolute;
    background-color: rgb(111, 111, 111); 
}
.topbar {
    left: 7px; 
    top: 0px; 
    right: 7px; 
    height: 4px; 
    position: absolute;
    background-color: rgb(111, 111, 111); 
}

<div class="container">
    <div class="inner"></div>
    <div class="leftbar"></div>
    <div class="topbar"></div>
</div>

LINK TO SCREEN SHOT IMAGE

【问题讨论】：

为什么人们坚持继续使用IE6？
字。越早越好……放弃 IE 6 支持的人越多，其他人就越容易。
如果放弃 IE6 这么容易就好了。不同站点（我的...）的平均值显示，17% 的访问者总数正在使用 IE6。那是很多人。不仅是我客户的客户，我还有几个客户也被 IE6 困住，他们想看看他们付出的代价。

标签： css internet-explorer-6 css-position

【解决方案1】：

IE6 在绝对定位方面非常糟糕。从左侧和右侧或从顶部和底部同时定位某些东西是行不通的。

你基本上有四种选择：

放弃对 IE6 的支持。
放弃绝对定位并使用其他方法（例如浮点数）。
为 IE6 提供网站的简化版本 - 例如使用条件 cmets 覆盖某些样式。
使用 JavaScript 帮助 IE6 定位（例如 absolutefudge.js）。

【讨论】：