Internet Explorer 7上绝对定位的父级中的百分比宽度子元素
我有一个绝对定位的div包含几个孩子，其中一个是相对定位的div 。 当我在子div上使用基于百分比的宽度时，它会在Internet Explorer 7上折叠为“0”宽度，但不会在Firefox或Safari上折叠。
如果我使用像素宽度 ，它的作品。 如果父母相对定位，则子女的百分比宽度就起作用。
- 有什么我在这里失踪？
- 除了基于像素的宽度 ，还有一个简单的解决方法吗？
- CSS规范的一个区域是否覆盖了这个？
父div需要有一个定义的width ，以像素或百分比。 在Internet Explorer 7中，父div需要为子百分比div定义的width才能正常工作。
这里是一些示例代码。 我想这就是你要找的。 以下显示在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单位，因为它们在创build液体布局时更有用，因为您可以使用em单位来填充和边距以及字体大小。 因此，如果您的文本被resize（这实际上是您所需要的），那么您的文本空间会随着文本的增长而成比例地缩小。 我不认为百分比比ems有更好的控制。 没有什么可以阻止你指定百分之几的ems（0.01 em），浏览器将会认为它是合适的。
CSS规范的一个区域是否覆盖了这个？
没有，据我记得em和％的是打算在CSS 1.0的字体大小。
我认为这与hasLayout属性在旧浏览器中的实现方式有关。
你有没有在IE8中试过你的代码，看看在那里工作吗？ IE8有一个debugging器（ F12 ），也可以在IE7模式下运行。
