Question

差不多是2010年，我还在处理IE6漏洞。叹息。

所以，这是一个新的（对我来说），我很难找到通过谷歌的答案。我正在创建一个带有内阴影的DIV。 div需要在宽度和高度上灵活。为了实现这一点，我给DIV一个内阴影的背景图像。然后我为其他3个角（右上角，右下角，左下角）添加3个额外的绝对定位div，并给它们每个高度，使它们重叠。

除了（毫不奇怪）IE6之外，这在每个浏览器中都很有效。在IE6中，绝对定位的div没有任何高度。我尝试过使用zoom：1来触发布局，但是没有这样做。有人知道解决这个问题吗？

<div class="rounded" style="
    width: 80%;
    max-width: 950px;
    margin: 10%;
    height: auto;
    background: url('images/bgnd-shadowbox-dark.gif');
    position: relative;
">

    <div class="rounded" style="
        width: 50%;
        height: 75%;
        position: absolute;
        top: 0px;
        right: 0px;
        background: yellow url('images/bgnd-shadowbox-dark.gif') top right;
        ">
    </div>
    <div class="rounded" style="
        width: 60%;
        height: 30%;
        position: absolute;
        bottom: 0px;
        right: 0px;
        background: orange url('images/bgnd-shadowbox-dark.gif') bottom right;
        ">
    </div>
    <div class="rounded" style="
        width: 50%;
        height: 25%;
        position: absolute;
        bottom: 0px;
        left: 0px;
        background: red url('images/bgnd-shadowbox-dark.gif') bottom left;
        ">
    </div>


    <div style="
            position: relative;
            border: 3px solid green;
            margin: 3em;
            "> 

        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>

    </div>
</div>

更新：澄清问题（因为我认为角落问题是红色鲱鱼）：如何在相对定位的div中具有绝对定位的DIV并且嵌套DIV是否遵循IE6中的百分比高度属性？

更新2：更多信息：如果容器div具有明确的高度，则可行。问题是当你希望容器div的高度基于相对定位的div的高度时。 IE6似乎无法弄明白。

Answer 1

也许我错过了一些关于你的图像构造的东西，但为什么不在3角上使用定位。

.corners .right-top {top: 0px; right: 0px;}
.corners .bottom-top {bottom: 0px; right: 0px;}
.corners .bottom-left {bottom: 0px; left: 0px;}

Answer 2

这对我有用，我确实在空div中有一个＆amp; nbsp。在css我使用了以下

*height:1px;
*padding:2px 0px;
*line-height:4px;

'*'表示它仅被IE6认可 div高度为4px。

在IE6中为绝对定位的DIV提供高度

2 个答案: