IE8缩放Bug

最新推荐文章于 2022-11-23 17:21:36 发布

原创最新推荐文章于 2022-11-23 17:21:36 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

46 篇文章

订阅专栏

工作中遇到页在精确布局，使用js+css方式实现，支持浏览器包括：ie8+,firefox,chrome，結果变态的测试使用各种放大/缩小页面的测试，导致布局问题，现一点点完善中。。。

今天发现一个ie8兼容性问题：若使用css百分比定义html,body的宽高，会导致页面缩放时不触发onresize事件，具体代码如下：

<!doctype html>
<html>
<head>
    <style type="text/css">
    html,body{
        width: 100%;
        height: 100%;
        background-color: #283B48;
    }
    </style>
</head>
<body>
<div id="show">0</div>
<script>
var j = 0;
if(window.addEventListener){   
    window.addEventListener('resize', function(){
    	document.getElementById('show').innerHTML = ++j;
    }, false);   
}else{   
    window.attachEvent('onresize', function(){
    	document.getElementById('show').innerHTML = ++j;
    });   
}
</script>
</body>
</html>

解决办法：可使用js在页面加载时动态設定html,body的百分比。