为什么在Internet Explorer 7上绝对位置父元素的百分比宽度子元素的宽度崩溃?

我有一个绝对定位的div，它包含几个子对象，其中一个是相对定位的div。当我在子对象div上使用percentage-based width时，它在IE7上崩溃为0 width，但在Firefox或Safari上没有。

如果我使用pixel width，它可以工作。如果父元素相对位置，则子元素上的百分比宽度可以工作。

  1. 我是不是漏了什么?
  2. 除了子对象上的pixel-based width之外，是否有一个简单的修复方法?
  3. CSS规范中是否有这方面的内容?
23250 次浏览
小开
最佳答案

父类div需要有一个已定义的width，可以是像素，也可以是百分比。在internet explorer 7中，父类div需要一个已定义的width，以使子类百分比div正确工作。

小开

下面是一个示例代码。我觉得这就是你要找的东西。下面的代码在Firefox 3 (mac)和IE7中显示完全相同。

#absdiv {
position: absolute;
left: 100px;
top: 100px;
width: 80%;
height: 60%;
background: #999;
}


#pctchild {
width: 60%;
height: 40%;
background: #CCC;
}


#reldiv {
position: relative;
left: 20px;
top: 20px;
height: 25px;
width: 40%;
background: red;
}
<div id="absdiv">
<div id="reldiv"></div>
<div id="pctchild"></div>
</div>

小开

在8之前的IE中，它的盒子模型有一个时间方面，最明显的是，它造成了基于百分比的宽度的问题。在你的例子中，默认情况下绝对定位的div没有宽度。它的宽度将根据其内容的像素宽度计算出来，并将在内容渲染后计算。因此，在这一点上，IE遇到并渲染你的相对位置div，它的父元素宽度为0，因此它自身崩溃为0。

如果你想更深入地讨论这个问题以及大量的工作示例，可以查看在这里。

小开

为什么百分比宽度子 在绝对定位的父工作 在IE7吗?< / p >

因为它是ie浏览器。

我是不是漏了什么?

也就是说，提高你的同事/客户对IE不好的认识。

除了基于像素的宽度外，是否有一个简单的解决方案?

使用em单位，因为它们在创建液态布局时更有用，因为你可以将它们用于填充和空白以及字体大小。因此，如果你调整了文本的大小(这是你真正需要的)，你的空白空间会根据文本的大小成比例地增长和缩小。我不认为百分比能比ems提供更好的控制;没有什么可以阻止您指定百分之一的ems (0.01 em)，浏览器将按照它认为合适的方式进行解释。

CSS规范中是否有这方面的内容?

没有，据我所知，em和% s在CSS 1.0时仅用于字体大小。

小开

我认为这与hasLayout属性在旧浏览器中实现的方式有关。

你有没有在IE8中尝试过你的代码，看看是否也能在那里工作? IE8有一个调试器(F12)，也可以在IE7模式下运行
小开

div需要有一个定义好的宽度:

<div id="parent" style="width:230px;">
<div id="child1"></div>
<div id="child2"></div>
</div>
小开

父标记<div>没有指定任何宽度。将它用于子<div>标记，它可以是百分比或像素，但无论它是什么，它都应该链接到相应的位置:

<div id="MainDiv" style="width:60%;">
<div id="Div1">
...
</div>
<div id="Div2">
...
</div>
...
</div>

提交答案