发现IE8的一个BUG，有IE8的帮忙测试一下，非常简单的效果

<!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>
    <title></title>
    <style type="text/css">
    html,body
    {
        overflow:hidden;
        height:100%;
        margin:0px;
    }
    #divTest
    {
        width:100px;
        position:absolute;
        top:0px;
        left:0px;
        background-color:#F0F0FF;
    }
    </style>
</head>
<body>
<div id="divTest">测试部分</div>
<script language="javascript" type="text/javascript">
    function Refresh() {
        var div = document.getElementById("divTest");
        var w = div.clientWidth;
        var bodyHeight = document.body.clientHeight;
        var bodyWidth = document.body.clientWidth;        div.style.left = (bodyWidth - w) + "px";
        div.style.height = bodyHeight + "px";
    }
    window.onload = function() {
        Refresh();
    }
    window.onresize = function() {
        Refresh();
    }
</script>
</body>
</html>
我要的效果就是，让一个DIV浮动在页面右边，宽100px，高度自适应页面
我知道通过CSS也可以实现这样的效果，但我需要通过JS来实现自然有我的需求当我改变页面大小的时候，大多情况下正常，仅有一种情况下出现异常
也就是，当页面的宽度和高度同时被改变，而且是变小的情况下，比如说用鼠票拖动IE右下角，同时缩小页面高、宽，如果缩小的宽度大于100px，也就是说在新宽度下完全看不到该DIV，那么即使JS代码将该DIV移到可视区，该DIV中的文字也就看不到了，但是如果你在文字本应该出现的地方用鼠标一选，那些文字又突然出现了。这种情况在最大化到还原尺寸的情况下也出现。不知道是我自己的IE8出现BUG，还是普遍现象？如果是IE8兼容模式，一切正常，FF下也一切正常

解决方案 »

  1.   

    document.body.clientHeight 改成 document.documentElement.clientHeight  试试， 我这没装IE8 
      

  2.   

    晕倒还真是的，我只试了document.documentElement.clientWidth没试height哎，
      

  3.   

    问题应该不会出在document.body.clientHeight 或 document.documentElement.clientHeight 吧
    因为div已经被正确计算到该出现的位置
    而且主要现象是但是如果你在文字本应该出现的地方用鼠标一选，那些文字又突然出现了
      

  4.   

    试试再说吧， 不行我去装个IE8 - -！ 你是不是加了W3C标准的嘛？ 如果是的话 应该就是这问题
      

  5.   


    也许是BUG. IE8 onresize有缩放时不能更新区域块的BUG.. 楼主可以试下把你的
    DIV高度设置个固定值 比如200 看下效果.再者 这个对于修复也简单 顶多resize的时候给innerHTML重置一下
      

  6.   

    没错，因为加了
    <!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">如果没加的话，一切正常
    但即使加了，在IE8兼容模式或FF下都是正常的
    而且我发现IE8下面的table如果加上了 table-layout:fixed; 的样式后，表格边框也经常出现错位现象
      

  7.   

    我要的效果就是高度自适应呀，而且把innerHTML重置会出现很多问题，比如说这个div内有个文本框，而且加上了一些事件代码，你一个重置我的东西就什么都完蛋了
      

  8.   

    我也没有IE6  把body改成documentElement试下
      

  9.   

    var de=document.compatMode=="CSS1Compat"?document.documentElement:document.body;
    //有w3c dtd时页面的顶层元素是html，而无dtd时是body，
    这样一试就出来了：<!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>
        <title></title>
        <style type="text/css">
        #divTest
        {
            width:100px;
            position:absolute;
            top:0px;
            left:0px;
            background-color:#F0F0FF;
        }
        </style>
    </head>
    <body>
    <div id="divTest">测试部分</div>
    <script language="javascript" type="text/javascript">
        function Refresh() {
            var div = document.getElementById("divTest");
            var w = div.clientWidth;
            var bodyHeight = document.body.clientHeight;
            var bodyWidth = document.body.clientWidth;        div.style.left = (document.documentElement.clientWidth - w) + "px";
            div.style.height = document.documentElement.clientHeight + "px";
        }
        window.onload = function() {
            Refresh();
        }
        window.onresize = function() {
            Refresh();
        }
    </script>
    </body>
    </html>