我有一个绝对定位的div,包含几个子div,其中一个是相对定位的div。当我在子div上使用基于百分比的宽度时,它在IE7上折叠为0宽度,但在Firefox或Safari上没有。
如果我使用像素宽度,它可以工作。如果父元素相对位置,则子元素上的百分比宽度可以工作。
我是不是漏了什么? 除了基于像素的宽度外,是否有一个简单的解决方法? CSS规范中是否有这方面的内容?
我有一个绝对定位的div,包含几个子div,其中一个是相对定位的div。当我在子div上使用基于百分比的宽度时,它在IE7上折叠为0宽度,但在Firefox或Safari上没有。
如果我使用像素宽度,它可以工作。如果父元素相对位置,则子元素上的百分比宽度可以工作。
我是不是漏了什么? 除了基于像素的宽度外,是否有一个简单的解决方法? CSS规范中是否有这方面的内容?
当前回答
在8之前的IE中,它的盒子模型有一个时间方面,最明显的是,它造成了基于百分比的宽度的问题。在这里,默认情况下绝对定位的div没有宽度。它的宽度将根据其内容的像素宽度计算出来,并将在内容渲染后计算。在这一点上,IE遇到并渲染了相对位置的div,它的父div宽度为0,这就是为什么它本身折叠为0。
如果您想要更深入的讨论,以及大量的工作示例,请在这里查看。
其他回答
在8之前的IE中,它的盒子模型有一个时间方面,最明显的是,它造成了基于百分比的宽度的问题。在这里,默认情况下绝对定位的div没有宽度。它的宽度将根据其内容的像素宽度计算出来,并将在内容渲染后计算。在这一点上,IE遇到并渲染了相对位置的div,它的父div宽度为0,这就是为什么它本身折叠为0。
如果您想要更深入的讨论,以及大量的工作示例,请在这里查看。
为什么不是percentage width子函数 在绝对定位的父工作 在IE7吗?
因为它是ie浏览器。
我是不是漏了什么?
也就是说,提高你的同事/客户对IE不好的认识。
除了基于像素的宽度外,是否有一个简单的解决方案?
使用em单位,因为它们在创建液体布局时更有用,因为你可以使用它们来填充和空白以及字体大小。因此,如果你调整了文本的大小(这是你真正需要的),你的空白空间会根据文本的大小成比例地增长和缩小。我不认为百分比能比ems提供更好的控制;没有什么可以阻止您指定百分之一的ems (0.01 em),浏览器将按照它认为合适的方式进行解释。
CSS规范中是否有这方面的内容?
没有,据我所知,em's和%'s在CSS 1.0时仅用于字体大小。
父div需要有一个已定义的宽度,以像素或百分比为单位。在Internet Explorer 7中,父div需要为子div的百分比正确工作定义宽度。
下面是一个示例代码。我觉得这就是你要找的东西。下面的代码在Firefox 3 (mac)和IE7中显示完全相同。
# absdiv { 位置:绝对的; 左:100 px; 前:100像素; 宽度:80%; 高度:60%; 背景:# 999; } # pctchild { 宽度:60%; 高度:40%; 背景:# CCC; } # reldiv { 位置:相对; 左:20 px; 上图:20 px; 高度:25 px; 宽度:40%; 背景:红色; } < div id = " absdiv " > < div id = " reldiv " > < / div > < div id = " pctchild " > < / div > < / div >
父标签<div>没有指定任何宽度。将它用于child <div>标签,它可以是百分比或像素,但无论它是什么,它都应该链接到相应的位置:
<div id="MainDiv" style="width:60%;">
<div id="Div1">
...
</div>
<div id="Div2">
...
</div>
...
</div>