IE6和IE7渲染相对定位元素的Bug
这个Bug很恼人。如果网页元素的样式使用了“>
具体的描述可以参看这里:http://friendlybit.com/css/ie6-resize-bug/(英文)
要自己重现也很简单,样式太概是这样的:
body { margin: 0 auto; width: 760px; /* 任意设置一个固定宽度的容器 */ } /* 把你要测试的元素放入容器并设置CSS: ; */ #example p { ; }HTML可能是这样的:
<html>
<head>
<title>test</title>
<style>
body { margin: 0 auto; width: 760px; border:1px red; /* 任意设置一个固定宽度的容器 */ }
/* 把你要测试的元素放入容器并设置CSS: >; */ #example p { ; border:1px green; }
</style>
</head>
<body>
<div >
</body>
</html>
你也可以分别用IE6、IE7、FF等浏览器查看这个页面:
http://friendlybit.com/files/ie6resizebug/
使用IE8的兼容模式也可以看到这个Bug。绿色放宽应该在黑色框内,在浏览器大小发生改变时IE没有调整绿色框的位置。
正确的呈现应该是这样的:
也可以直接用IE6和IE7访问这个页面:http://friendlybit.com/files/ie6resizebug/fixed.html
上面链接是修复之后的呈现。修复的方式很简单,就是在body上加入样式“>
IE的进化速度太慢了,到了IE8还不支持CSS圆角,而IE6还有很多人在用,伤脑筋。如果是我自己能够控制的项目,我可能会采取比较激进的措施,直接不理IE6和IE7——毕竟IE8都已经发布很久了。
对于这个Bug的总结就是,如果看到页面上某些元素随着浏览器大小的改变而位置不变(当然,前提是这不是你想要的效果)或者拖动滚动条某些元素的位置也不改变,那么就可以看看不动的元素是不是设置了>