当前位置：首页 → 问答吧 → CSS两列等高的问题，在IE6下有问题，在FF3和IE78下都没有问题

CSS两列等高的问题，在IE6下有问题，在FF3和IE78下都没有问题

时间：2010-08-23

来源：互联网

用CSS弄了一个两列等高的例子，一测试发现在IE6下面有问题，不会调整，希望哪位能帮个忙解决下。。。

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
html,body{
    margin:0;
    padding:0;
}
.all{
    position:relative;
    padding-left:200px;
    overflow:hidden;
}
.left{
    width:200px;
    background-color:red;
    position:absolute;
    top:0;
    left:0;
    padding-bottom:9999px;
    margin-bottom:-9999px;
}
.right{
    width:100%;
    position:relative;
    background-color:green;
    padding-bottom:9999px;
    margin-bottom:-9999px;
}
</style>
</head>
<body>
<div class="all">
    <div class="left"> 
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
    </div>
    <div class="right"> 
        fdsfds <br />
        fdfdsF<br />
        SDf<br />
        DfD<br />
    </div>
</div>
</body>
</html>

作者: jwen_tang 发布时间: 2010-08-23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
html,body{
margin:0;
padding:0;
}
.left{
width:200px;
background-color:#F00;
position:absolute;
top:0;
left:0;
}
.right{
width:100%;
position:relative;
left:200px;
background-color:green;
}
</style>
</head>
<body>
<div class="all">
<div class="left">
fsdfsdf<br />
fdsfsdf<br />
SDfsdfSD<br />
fsdfsdf<br />
fdsfsdf<br />
SDfsdfSD<br />
fsdfsdf<br />
fdsfsdf<br />
SDfsdfSD<br />
fsdfsdf<br />
fdsfsdf<br />
SDfsdfSD<br />
fsdfsdf<br />
fdsfsdf<br />
SDfsdfSD<br />
</div>
<div class="right">
fdsfds <br />
fdfdsF<br />
SDf<br />
DfD<br />
</div>
</div>
</body>
</html>

作者: yingying901029 发布时间: 2010-08-23

谢谢yingying901029
你的代码我测试过了，在IE6下无法等高

作者: jwen_tang 发布时间: 2010-08-23

这涉及到两个问题。
第一个，当外层元素是position:relative时，绝对定位元素的定位在IE6里不是根据border box定位的，是根据padding box定的位。
比如，下面的例子：
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.all{
    position:relative;
    padding-left:300px;
    border:1px solid red;
}
.left{
    background-color:green;
    position:absolute;
    top:0;
    left:0;
}
.right{
    border:1px solid blue;
}
</style>
</head>
<body>
<div class="all">
    <div class="left">
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
        fsdfsdf<br />
        fdsfsdf<br />
    </div>
    <div class="right">
        fdsfds <br />
        fdfdsF<br />
        SDf<br />
        DfD<br />
    </div>
</div>
</body>
</html>

在IE6 和 IE的quirks mode下，left的定位是有问题的。

作者: WebAdvocate 发布时间: 2010-08-23

还有这个奇异的错误，跟overflow:hidden有关,跟margin:-9999px有关和padding:9999px也有关
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
html,body{
    margin:0;
    padding:0;
}
.all{
    padding-left:200px;
    border:1px solid red;
    overflow:hidden;
}
.left{
    width:200px;
    background-color:green;
    padding-bottom:9999px;
    margin-bottom:-9999px;
}

</style>
</head>
<body>
<div class="all">
    <div class="left">
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
    </div>
</div>
</body>
</html>

很明显，IE里被内容撑开了，而其他浏览器中却因为margin:-9999px而没被撑开

作者: WebAdvocate 发布时间: 2010-08-23

呃，，这个兼容性问题很纠结

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
html,body{
    margin:0;
    padding:0;
}
.all{
    position:relative;
    _position:absolute;
    padding-left:200px;
    overflow:hidden;
}
.left{
    width:200px;
    background-color:red;
    position:absolute;
    top:0;
    left:0;
    padding-bottom:9999px;
    margin-bottom:-9999px;
}
.right{
    width:100%;
    position:relative;
    background-color:green;
    padding-bottom:9999px;
    margin-bottom:-9999px;
}
</style>
</head>
<body>
<div class="all">
    <div class="left">
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
    </div>
    <div class="right">fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
        fsdfsdf<br />
        fdsfsdf<br />
        SDfsdfSD<br />
        fdsfds <br />
        fdfdsF<br />
        SDf<br />
        DfD<br />
    </div>
</div>
<div style="width:100px; height:100px; background-color:red;">IE6下没有这个红色的块</div>
</body>
</html>

关键修改：
.all{
position:relative;
_position:absolute;
padding-left:200px;
overflow:hidden;
}
这么改就可以了，但是你得注意，IE6下 .all 是绝对定位, 它不在常规流中。
其他浏览器中是相对定位
没辙，还是用了CSS hack了

作者: WebAdvocate 发布时间: 2010-08-23

唉。。。我都烦了几天了，一直搞不定。。。

作者: jwen_tang 发布时间: 2010-08-23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
html,body{
margin:0;
padding:0;
}
.all{
position:relative;
overflow:hidden;
}

.left{
width:200px;
background-color:#F00;
position:absolute;
top:0;
left:0;
padding-bottom:9999px;
margin-bottom:-9999px;
}
.right{
position:relative;
left:200px;
background-color:green;
padding-bottom:9999px;
margin-bottom:-9999px;
}
</style>
</head>
<body>
<div class="all">
<div class="left">
fsdfsdf<br />
fdsfsdf<br />
SDfsdfSD<br />
fsdfsdf<br />
fdsfsdf<br />
SDfsdfSD<br />
fsdfsdf<br />
fdsfsdf<br />
SDfsdfSD<br />
fsdfsdf<br />
fdsfsdf<br />
SDfsdfSD<br />
fsdfsdf<br />
fdsfsdf<br />
SDfsdfSD<br />
</div>
<div class="right">
fdsfds <br />
fdfdsF<br />
SDf<br />
DfD<br />
</div>
</div>
</body>
</html>

作者: yingying901029 发布时间: 2010-08-23

看看这次的

作者: yingying901029 发布时间: 2010-08-23