html -Internet Explorer 7上绝对定位父级中的百分比宽度子元素

Translate

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

如果我用pixel width, 有用。如果父母位置相对,则孩子的百分比宽度有效。

  1. 我在这里想念什么吗?
  2. 除了pixel-based width在孩子身上?
  3. CSS规范中是否有涵盖此方面的内容?
This question and all comments follow the "Attribution Required."

所有的回答

Haley Lee
Translate

父母div需要有一个定义width,以像素或百分比表示。在Internet Explorer 7中,父级div需要一个定义width儿童百分比div才能正常工作。

来源
Translate

这是一些示例代码。我认为这就是您想要的。在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>
来源
Translate

IE 8之前的版本在其盒模型上具有时间方面的特征,最明显的问题是基于百分比的宽度产生了问题。在您的情况下,绝对定位div默认情况下没有宽度。它的宽度将根据其内容的像素宽度进行计算,并将在呈现内容之后进行计算。因此,在这一点上,IE遇到并呈现了相对定位div它的父级的宽度为0,因此为什么它本身会崩溃为0。

如果您想对此进行更深入的讨论以及许多工作示例,请尝试一下这里.

来源
Translate

为什么绝对定位的父项中的百分比宽度子项在IE7中不起作用?

因为它是Internet Explorer

我在这里想念什么吗?

就是说,要提高您的同事/客户对IE糟糕的认识。

除了基于像素的孩子宽度之外,还有其他简单的解决方法吗?

采用em单位,因为它们在创建液体布局时更有用,因为您可以将它们用于填充和边距以及字体大小。因此,如果调整其大小,则空白区域将与文本成比例地增长和缩小(这确实是您所需要的)。我不认为百分比可以比ems更好地控制;您可以使用百分之百的ems(0.01 em)进行指定,浏览器将根据需要进行解释。

CSS规范中是否有涵盖此方面的内容?

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

来源
Translate

我认为这与hasLayout属性是在旧版浏览器中实现的。

您是否在IE8中尝试过代码以查看是否也可以在其中工作? IE8有一个调试器(F12),也可以在IE7模式下运行。

来源
Translate

div需要具有定义的宽度:

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
来源
上一个问题:
c# -转换Decimal为Double