我有绝对的定位 div 包含多个孩子,其中一个是相对定位的 div. 。当我使用 基于百分比的宽度 在孩子身上 div, ,它折叠到“0”宽度 互联网浏览器 7, ,但不适用于 Firefox 或 Safari。

如果我使用 像素宽度, , 有用。如果父级相对定位,则子级的百分比宽度起作用。

  1. 我在这里缺少什么吗?
  2. 除了以下方法之外,是否有简单的解决方法 基于像素的宽度 在孩子上?
  3. CSS 规范中是否有涵盖此内容的区域?
有帮助吗?

解决方案

家长 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中绝对定位的父母工作中宽度的孩子的百分比不足?

因为它是互联网爆炸者

我在这里缺少什么吗?

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

除了子项基于像素的宽度之外,还有简单的修复方法吗?

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

CSS 规范中是否有涵盖此内容的区域?

没有,据我所知 em's 和 %'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>
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top