快到 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 就是想不通。