提高IE6中绝对定位的DIV的高度 [英] Giving height to absolutely positioned DIVs in IE6

问题描述

快到2010年了，我仍在处理IE6错误。 叹气。

It's almost 2010 and I'm still dealing with IE6 bugs. sigh.

（对我来说）这是我遇到的一个新问题，我很难通过Google找到答案。我正在创建带有内部阴影的DIV。 div需要在宽度和高度上灵活。为此，我为DIV提供了内部阴影的背景图像。然后，我在其他3个角（右上，右下，左下）中添加3个绝对定位的div，并为其赋予各自的高度，以便它们重叠。

So, here's a new one (to me) that I'm having trouble finding a answer to via google. I'm creating a DIV with an inner-shadow. The div needs to be flexible in width and height. To accomplish this, I'm giving the DIV a background image of the inner-shadow. I then add 3 additional absolutely positioned divs within for the other 3 corners (top right, bottom right, bottom left) and give them each heights so they overlap.

此功能在IE6除外的所有浏览器中都很好用。在IE6中，绝对定位的div没有任何高度。我尝试使用缩放：1触发具有布局，但没有完成。有人知道解决办法吗？

This works great in every browser except (no surprise) IE6. In IE6, the absolutely positioned divs don't have any height. I've tried using zoom: 1 to trigger has layout, but that didn't do it. Anyone know of a fix for this?

<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中的百分比高度属性吗？

UPDATE: To clarify the issue (since I think the corner issue is a red herring): How can one have an absolutely positioned DIV inside a relatively positioned div and have that nested DIV adhere to a percentage height attribute in IE6?

更新2：更多信息：如果给容器div赋予了明确的高度，则可以使用。问题是当您希望容器div的高度基于相对定位的div的高度时。 IE6似乎无法解决这个问题。

UPDATE 2: More info: If the container div is given an explicit height, this works. The problem is when you want the container div's height to be based on the relatively positioned div's height. It appears that IE6 just can't figure that out.

推荐答案

也许我在图像构造上缺少某些东西，但是为什么不使用3个角上的定位呢？

Maybe im missing something abotu your image construction but why not just use positioning on the 3 corners.

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

这篇关于提高IE6中绝对定位的DIV的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！