代码之家 › 专栏 › 技术社区 › Ilya Volodin

高度:在IE6中高度未知的另一个分区内100%

internet-explorer-6 css

Ilya Volodin · 技术社区 · 15 年前

我有一个简单的HTML布局:

<div style="position:relative; width:200px">
   <div style="position:absolute; top:0; left:0; background-color:red; z-index:-1; width:100%; height: 100%"></div>
   Some text goes here....
</div>

在所有浏览器中,类似这样的东西都可以正常工作,除了IE6。当添加文本时,顶部的DIV被拉伸,绝对位置的DIV也被拉伸。但在IE6中,绝对位置DIV的高度总是只有1行。我知道IE6不能动态地重新计算大小,因此你必须在body标签上设置height:100%,如果你想使用height:100%,在页面上的任何地方,但是在这种情况下,我不能设置height:100%,因为我希望它正好是它里面文本的正确大小。有什么帮助吗?

3 回复 | 直到 15 年前

prodigitalson 15 年前

添加 overflow: hidden; 绝对分区

Rob 15 年前

这是IE6中的一个已知错误,但对于我的一生,我想不起解决方法。我会查的,但是,从我的头顶上,尝试添加“行高:1”,或者一些值,看看它是否修复了它。

Ilya Volodin 15 年前

经过大量的测试和调查,我得出了一个结论:对于IE6来说,除了javascripts之外,没有任何方法可以解决这个问题,它对我来说不起作用。所以我不得不稍微改变一下结构。最终结果如下:

<div style="position:relative; width:200px; background-color:red;">
   <div style="margin: -10px -20px">Some text goes here....</div>
</div>

这样,内部分区的内容将设置内部分区的高度和负的页边距,从而确保外部分区的高度始终大于20px,宽度始终大于内容分区的宽度40px。我知道在查看问题时答案是没有意义的,但它也完全按照我需要的方式工作,因为它允许我o在带有图像的背景(外部分区)上创建多个分区,然后用负边距调整内容分区,使其占用与所有背景分区相同的空间。

推荐文章