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


296

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

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

  1. 我在这里想念什么吗?
  2. 除了pixel-based width在孩子身上,还有其他简单的解决方法吗?
  3. CSS规范中是否有涵盖此方面的内容?

Answers:


147

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


60

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


38

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

如果您想对此进行更深入的讨论以及许多可行的示例,请在此处进行阅读


35

为什么绝对宽度的子级百分比子项在IE7中不处于绝对位置?

因为它是Internet Explorer

我在这里想念什么吗?

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

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

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

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

没有,据我所记得em,CSS和1.0仅用于字体大小。


32

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

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.