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

Question

我有一个绝对定位的div包含几个孩子,其中一个是相对定位的div.当我在子项上使用基于百分比的宽度时percentage-based width,它会在Internet Explorer 7上折叠为"0"宽度,但在Firefox或Safari上则不会折叠.

如果我使用像素宽度,它的工作原理.如果父级相对定位,则子级的宽度百分比有效.

1. 这里有什么我想念的吗？
2. 除了孩子的基于像素的宽度之外,还有一个简单的解决方法吗？
3. CSS规范中是否有一个涵盖此范围的区域？

Answer 1

父级div需要以width像素或百分比形式定义.在Internet Explorer 7中,父级div需要width为子百分比divs 定义才能正常工作.

Answer 2

这是一些示例代码.我想这就是你要找的东西.以下在Fi​​refox 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>

Answer 3

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

如果您想要对此进行更深入的讨论以及许多工作示例,请在这里有一个雄鸟.

Answer 4

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

因为它是Internet Exploder

这里有什么我想念的吗？

也就是说,提高你的同事/客户对IE糟透了的认识.

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

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

CSS规范中是否有一个涵盖此范围的区域？

没有,据我所知em,%和仅用于CSS 1.0的字体大小.

Answer 5

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

您是否在IE8中尝试过代码以查看是否可以在其中运行？IE8有一个Debugger(F12),也可以在IE7模式下运行.

Answer 6

需要div有一个定义的宽度：

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

Answer 7

父<div>标记没有指定任何宽度。将它用于子<div>标签，它可以是百分比或像素，但无论它是什么，它都应该链接到其适当的位置：

<div id="MainDiv" style="width:60%;">
    <div id="Div1">
        ...
    </div>
    <div id="Div2">
        ...
    </div>
    ...
</div>