Internet Explorer 7 上绝对定位父元素中的百分比宽度子元素
-
08-06-2019 - |
题
我有绝对的定位 div
包含多个孩子,其中一个是相对定位的 div
. 。当我使用 基于百分比的宽度 在孩子身上 div
, ,它折叠到“0”宽度 互联网浏览器 7, ,但不适用于 Firefox 或 Safari。
如果我使用 像素宽度, , 有用。如果父级相对定位,则子级的百分比宽度起作用。
- 我在这里缺少什么吗?
- 除了以下方法之外,是否有简单的解决方法 基于像素的宽度 在孩子上?
- CSS 规范中是否有涵盖此内容的区域?
解决方案
家长 div
需要有一个定义的 width
, ,以像素或百分比为单位。在 Internet Explorer 7 中,父级 div
需要一个定义的 width
儿童百分比 div
才能正常工作。
其他提示
这是一些示例代码。我想这就是您正在寻找的。以下在 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
单位,因为它们在创建液体布局时更有用,因为您可以将它们用于填充和边距以及字体大小。因此,如果调整文本大小,您的空白区域将与文本成比例地增大和缩小(这确实是您所需要的)。我不认为百分比比 em 能提供更好的控制;没有什么可以阻止您以百分之一 em (0.01 em) 为单位进行指定,浏览器将按照其认为合适的方式进行解释。
CSS 规范中是否有涵盖此内容的区域?
没有,据我所知 em
's 和 %'s 在 CSS 1.0 中仅用于字体大小。
我认为这与方式有关 hasLayout
属性是在旧版浏览器中实现的。
您是否在 IE8 中尝试过您的代码,看看是否也可以在其中运行?IE8 有一个调试器(F12)并且还可以在IE7模式下运行。
这 div
需要有一个定义的宽度:
<div id="parent" style="width:230px;">
<div id="child1"></div>
<div id="child2"></div>
</div>