IE6跟IE7渲染相对定位元素的Bug _Web前端

IE6和IE7渲染相对定位元素的Bug

这个Bug很恼人。如果网页元素的样式使用了“>

具体的描述可以参看这里:http://friendlybit.com/css/ie6-resize-bug/(英文)

要自己重现也很简单，样式太概是这样的:

body { margin: 0 auto; width: 760px; /* 任意设置一个固定宽度的容器 */ } /* 把你要测试的元素放入容器并设置CSS： ; */ #example p { ; }

HTML可能是这样的：

<html>

<head>

<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/

启航 | IE6和IE7渲染相对定位元素的Bug - pewper - pewper的博客

使用IE8的兼容模式也可以看到这个Bug。绿色放宽应该在黑色框内，在浏览器大小发生改变时IE没有调整绿色框的位置。

正确的呈现应该是这样的：

启航 | IE6和IE7渲染相对定位元素的Bug - pewper - pewper的博客

也可以直接用IE6和IE7访问这个页面：http://friendlybit.com/files/ie6resizebug/fixed.html

上面链接是修复之后的呈现。修复的方式很简单，就是在body上加入样式“>

IE的进化速度太慢了，到了IE8还不支持CSS圆角，而IE6还有很多人在用，伤脑筋。如果是我自己能够控制的项目，我可能会采取比较激进的措施，直接不理IE6和IE7――毕竟IE8都已经发布很久了。

对于这个Bug的总结就是，如果看到页面上某些元素随着浏览器大小的改变而位置不变（当然，前提是这不是你想要的效果）或者拖动滚动条某些元素的位置也不改变，那么就可以看看不动的元素是不是设置了>