IE6 CSS高度height:100% 无效解决方法总结


        上面红色部分为 height:100%; 自动拉伸到与父元素一样的高度。
在IE7 8 FF 等浏览器中通过position:absolute;可以使height:100%;正常显示，IE6下无效。
方法一：
       使用CSS嵌入JS来实现。

_height:expression(document.getElementById('div2').offsetHeight+"px");

这句CSS只针对IE6有效。
测试:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style>
#box{
    position:relative;
    border:1px solid #CCC;
    width:180px;
}

#div1{
    position:absolute;top:0;right:0;
    width:100px;
    border-left:1px solid #CCC;
    background:red;
    float:right;
    height:100%;
    _height:expression(document.getElementById('div2').offsetHeight+"px");
}
</style>
</head>
<body>

<div id="box">
    <div id="div1"></div>
    <div id="div2">
        1111<br/>
        1111<br/>
        1111<br/>
        1111<br/>
        1111<br/>
        1111<br/>
    </div>
</div>

</body>
</html>

方法二：
      去掉HTML第一行的<!doctype> 声明，并且给父容器指定height属性。
测试:

<!--<!doctype html> 删掉这句-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style>
#box{
    position:relative;
    border:1px solid #CCC;
    width:180px;
    height:150px;/* 给父元素指定height值 */
}

#div1{
    position:absolute;top:0;right:0;
    width:100px;
    border-left:1px solid #CCC;
    background:red;
    float:right;
    height:100%;
    /*_height:expression(document.getElementById('div2').offsetHeight+"px");*/
}
</style>
</head>
<body>

<div id="box">
    <div id="div1"></div>
    <div id="div2">
        1111<br/>
        1111<br/>
        1111<br/>
        1111<br/>
        1111<br/>
        1111<br/>
    </div>
</div>

</body>
</html>

 

posted @ 2013-02-05 15:47  纯属偶然_黄勇  阅读(7721)  评论(0)  编辑  收藏  举报