IE6和IE7渲染相对定位元素的Bug
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的总结就是，如果看到页面上某些元素随着浏览器大小的改变而位置不变（当然，前提是这不是你想要的效果）或者拖动滚动条某些元素的位置也不改变，那么就可以看看不动的元素是不是设置了>