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

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

  1. 这里有什么我想念的吗?
  2. 除了孩子pixel-based width之外,还有一个简单的解决方法吗?
  3. CSS规范中是否有一个涵盖此范围的区域?

===============>>#1 票数:143 已采纳

div需要具有定义的width ,以像素为单位或以百分比表示。 在Internet Explorer 7中,父div需要为子百分比div定义的width才能正常工作。

===============>>#2 票数:57

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

===============>>#3 票数:37

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

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

===============>>#4 票数:34

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

因为它是Internet Explorer

这里有什么我想念的吗?

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

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

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

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

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

===============>>#5 票数:31

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

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

===============>>#6 票数:1

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

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

  ask by Kevin Dente translate from so

未解决问题?本站智能推荐:

关注微信公众号