为啥 Internet Explorer 7 上绝对定位的父元素中的百分比宽度子元素的宽度会塌陷？

Posted 2023-03-06

技术标签:

【中文标题】为啥 Internet Explorer 7 上绝对定位的父元素中的百分比宽度子元素的宽度会塌陷？【英文标题】：Why did the width collapse in the percentage width child element in an absolutely positioned parent on Internet Explorer 7?为什么 Internet Explorer 7 上绝对定位的父元素中的百分比宽度子元素的宽度会塌陷？ 【发布时间】：2010-09-05 05:27:18 【问题描述】：

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

如果我使用pixel width，它可以工作。如果父级相对定位，则子级上的百分比宽度有效。

pixel-based width

【问题讨论】：

【参考方案1】：

父div 需要定义一个width，以像素或百分比为单位。在 Internet Explorer 7 中，父 div 需要为子百分比 divs 定义的 width 才能正常工作。

【讨论】：

【参考方案2】：

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

【讨论】：

【参考方案3】：

8 之前的 IE 对其盒子模型有一个时间方面的问题，最明显的是会产生基于百分比的宽度问题。在您的情况下，默认情况下绝对定位的 div 没有宽度。它的宽度将根据其内容的像素宽度计算出来，并在内容渲染后计算。因此，此时，IE 遇到并呈现您相对定位的div，其父级的宽度为 0，因此它本身折叠为 0。

如果您想对此进行更深入的讨论以及大量工作示例，请联系here。

【讨论】：

【参考方案4】：

为什么百分比宽度不是子级在绝对定位的父母工作中在 IE7 中？

因为它是 Internet Explorer。

这里有什么我遗漏的吗？

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

除了孩子的基于像素的宽度之外，还有一个简单的解决方法吗？

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

CSS 规范中是否有涵盖此内容的领域？

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

【讨论】：

【参考方案5】：

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

您是否在 IE8 中尝试过您的代码，看看是否也可以在那里工作？ IE8有一个Debugger (F12)，也可以在IE7模式下运行。

【讨论】：

【参考方案6】：

div 需要定义宽度：

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

【讨论】：

【参考方案7】：