css - IE6、絶対位置、100% 幅

Question

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;
}

（jsfiddle.netのライブデモ）。

最新のブラウザーと IE6 で確認してください。次のようなものが表示されます。

修正方法は？

Answer 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;
}