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

jneque 发布于 2018-02-02 css 最后更新 2018-02-02 11:24 902 浏览

我有一个绝对定位div包含几个子元素,其中之一是一个相对定位div。当我在div子项上使用基于的百分比宽度时,它会在Internet Explorer 7上折叠为“0”宽度,但不会在Firefox或Safari上折叠。 如果我使用像素宽度,则可以使用。如果父级相对定位,则子女的百分比宽度就起作用。

  1. 我在这里错过了什么吗?
  2. 除了基于像素的宽度之外,还有一个简单的解决方法 子?
  3. 是否有CSS规范的一个范围覆盖了这个?
已邀请:

funde

赞同来自:

div需要有一个定义的width,以像素或百分比表示。在Internet Explorer 7中,父div需要定义的width用于子百分比divs正常工作。

qquod

赞同来自:

这里是一些示例代码。我想这就是你要找的。以下显示在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>

oiusto

赞同来自:

8之前的IE在其盒子模型中具有时间方面,其中最显着的是产生了基于百分比的宽度的问题。在你的情况下,默认情况下,绝对定位的div没有宽度。它的宽度将根据其内容的像素宽度计算出来,并在内容呈现后计算。所以在IE浏览器遇到并呈现相对定位的div的时候,它的父元素的宽度为0,为什么它本身会崩溃到0。 如果您想深入讨论这个问题以及大量的工作示例,请使用gAND here

fillum

赞同来自:

Why doesn’t the percentage width child in absolutely positioned parent work in IE7?
因为它是互联网爆炸
Is there something I'm missing here?
也就是说,提高你的同事/客户对IE的吸引力。
Is there an easy fix besides the pixel-based width on the child?
使用em单位,因为它们在创建液体布局时更有用,因为它们可以用于填充和边距以及字体大小。因此,如果您的文本被调整大小(这实际上是您所需要的),那么您的文本空间会随着文本的增长而成比例地缩小。我不认为百分比比ems有更好的控制。没有什么可以阻止你指定百分之几的ems(0.01 em),浏览器将会认为它是合适的。
Is there an area of the CSS specification that covers this?
没有,据我所知,em和%是用于CSS 1.0的字体大小。

quo_et

赞同来自:

我认为这与hasLayout属性在旧浏览器中的实现方式有关。 你有没有在IE8中试过你的代码,看看在那里工作吗? IE8有一个调试器( F12 ),也可以在IE7模式下运行。