在 IE6 中为绝对定位的 DIV 赋予高度
快到 2010 年了,我仍在处理 IE6 的错误。 叹息。
所以,这是一个新的(对我来说),我很难通过谷歌找到答案。我正在创建一个带有内阴影的 DIV。 div 的宽度和高度需要灵活。为了实现这一点,我为 DIV 提供了内阴影的背景图像。然后,我在其他 3 个角(右上角、右下角、左下角)内添加 3 个额外的绝对定位的 div,并给它们每个高度,以便它们重叠。
这在除 IE6 之外的所有浏览器中都非常有效。在 IE6 中,绝对定位的 div 没有任何高度。我尝试过使用 Zoom: 1 来触发 has 布局,但没有成功。有人知道这个问题的修复方法吗?
<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 无法解决这个问题。
It's almost 2010 and I'm still dealing with IE6 bugs. sigh.
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.
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>
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?
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.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
也许我错过了一些关于你的图像构建的东西,但为什么不只使用三个角的定位。
Maybe im missing something abotu your image construction but why not just use positioning on the 3 corners.
这对我有用,我确实在空 div 中有一个 。
在CSS中我使用了以下
'*'表示它仅被IE6识别
div 高度为 4px。
this worked for me, I did have an inside the empty div.
in the css I used the following
' * ' says its only recognized by IE6
the div height is 4px.