IE6，绝对位置，100% 宽度答案

【问题标题】：IE6, Absolute Position, 100% WidthIE6，绝对位置，100% 宽度
【发布时间】：2012-11-23 23:19:52
【问题描述】：

IE6 的另一个问题.. 这是我的代码：

HTML：

<div class="a">
    <div class="b">
        <div class="c">
            <span style="display:block; background:yellow; height: 170px; width:100%;"></span>
            <div class="d">
Hello World!            </div>
        </div>
    </div>
</div>

CSS：

.a{
    background: black;
    float: right;
    height: 200px;
    margin: 0 2px;
    width: 200px;
}

.b{
    padding: 15px 10px;
}

.c{
    position: relative;
}

.d{
    background-color: green;
    bottom: 0;
    color: white;
    opacity: 0.85;
    position: absolute;
    left: 0;
    width: 100%;
    zoom: 1;
}

.e{
    font-weight: bold;
    padding: 7px;
}

(live demo on jsfiddle.net).

在现代浏览器和 IE6 中检查它。你会看到类似的东西：

如何解决？

【问题讨论】：

@Diodeus：不，我已经在 Win XP SP2 上的原始 IE6 上进行了测试
是宽度问题还是底部定位问题？
@simoncereska：我觉得是定位……
你可能需要去丑陋的IE“表达式”方法。看这里：stackoverflow.com/questions/7064865/ie6-absolute-positioning
@Diodeus：我讨厌表达......如果我没有找到有效的答案，我会带着条件去......

标签： css internet-explorer-6

【解决方案1】：

试试这个：

HTML：

<div class="a">

            <span style="display:block; background:yellow; height: 170px; width:100%;"></span>
            <div class="d">
Hello World!            </div>


</div>

CSS：

.a{
    border: 1px solid black;
    border-width: 15px 10px;
    height: 170px;
    margin: 0 2px;
    width: 180px;
    position: relative;
    float: right;
}
.d{
    background-color: white;
    bottom: 0;
    color: black;
    opacity: 0.85;
    position: absolute;
    left: 0;
    width: 100%;
}

.e{
    font-weight: bold;
    padding: 7px;
}

【讨论】：

谢谢，不过黑色方块应该是div，不是边框...（因为我要设置图片背景）