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的总结就是，如果看到页面上某些元素随着浏览器大小的改变而位置不变（当然，前提是这不是你想要的效果）或者拖动滚动条某些元素的位置也不改变，那么就可以看看不动的元素是不是设置了>
分享到：
相关推荐
这是因为IE6在处理绝对定位时存在一些问题，不设置相对定位可能导致元素的位置难以控制，甚至出现重叠现象。 3. **浮动元素的display属性**：IE6存在一个著名的双倍外边距bug，当设置浮动元素的margin时，可能会...
然而，如同许多前端组件一样，它可能存在一些与特定浏览器兼容性相关的先天bug，特别是对于老版本的Internet Explorer（如IE6、IE7等）。在这些老版本的IE浏览器中，由于其对CSS3、JavaScript和DOM的支持有限，可能...
然而，浏览器之间的兼容性问题常常会给开发者带来挑战，尤其是在处理IE6、IE7和IE8这些较老版本的浏览器时。本文将深入探讨在"FireFox正常 IE错位的绝对定位元素"这一问题中的关键知识点。 1. **绝对定位与浮动元素...
### 解决IE6中的定位问题：Position Fixed 在早期的Web开发中，Internet Explorer 6（简称IE6）因其浏览器兼容性问题而臭名昭著。其中一个常见的问题是`position: fixed;`属性在IE6中不起作用。这使得开发者很难...
当元素设置为`display:inline-block`时，IE6会出现双边距bug，可以通过设置`display:block`或`zoom:1;`（触发hasLayout）来消除。 5. **hasLayout机制** IE6特有的hasLayout机制，当元素满足某些条件时，会自动...
标题中的“IE又一个让人吐血的BUG: 关于 table的position 和 select”指的是在Internet Explorer（IE）浏览器中，开发者遇到的一个与HTML表格（table）的定位（position）属性和下拉选择框（select）相关的bug。...
5. **定位问题**：IE7在绝对定位和相对定位方面的处理有其独特性，可能需要额外的CSS属性来修正。 6. **边距重叠问题**：在某些情况下，IE7会合并相邻浮动元素的外边距，这在其他浏览器中不会发生。 通过创建针对IE...
其中，"‘overflow:visible’IE6渲染bug"是导致许多页面在IE6和IE7中显示不一致的重要原因。在Web布局中，`overflow`属性用于控制元素内容溢出其边界的行为。在IE6中，当设置为`overflow:visible`时，可能会出现意料...
IE6 和 IE7 中存在许多渲染问题，这些问题可以通过激活元素的 `hasLayout` 属性来解决。这个特性允许浏览器正确地理解元素的边界和位置，特别是在需要将行内元素变为块级元素或者实现透明效果时尤为重要。 **示例：...
然而，在IE6中，由于浏览器的渲染引擎存在一些已知的缺陷，当一个浮动或者定位的`<div>`元素与下拉菜单重叠时，下拉菜单可能会意外地覆盖`<div>`，导致部分内容无法看见。 这个问题的核心在于IE6对CSS `z-index` ...
在IE6浏览器中，由于其自身的布局和渲染机制存在一些bug，导致在实现多级下拉菜单时，可能会出现下拉菜单被页面中的`<select>`元素遮挡的问题。这个问题对于网页开发者来说是一个常见的头疼问题，尤其是在需要兼容旧...
这里提到的问题是关于IE6、IE7以及在IE8、9、10中使用IE7兼容模式下，对于绝对定位（absolute）或相对定位（relative）的父元素和子元素的显示与隐藏的一个特定bug。这个bug主要涉及到元素的`display`属性。 通常，...
许多IE6（包括IE7）的渲染问题可以通过触发元素的hasLayout属性来解决。HasLayout是一个IE内部属性，用于确定元素的布局和定位。设置元素的高度或宽度可以触发hasLayout。推荐设置实际尺寸，但在实际中设置"height:1...
需要注意的是，IE6中的BUG和解决方案往往比较特殊，可能需要针对不同的布局情况和元素特性来进行特别的处理。在实际工作中，最佳的实践是尽量减少对IE6的支持，或者明确告知客户和项目相关方可能存在的兼容性问题，...
在这种情况下，ie7.js是一个知名的库，它通过模拟新的DOM方法、修复CSS渲染bug以及提供其他兼容性补丁，帮助提升IE6-8对现代Web标准的支持。 ie7.js插件的核心原理是通过JavaScript模拟实现一些IE较新版本中才有的...
本知识点将详细介绍IE6中一个特定的CSS布局bug：当外部容器使用相对定位且其宽度或高度为奇数时，内部绝对定位元素的布局可能会出现问题。 在传统的CSS布局中，我们经常使用相对定位和绝对定位来控制元素的位置。...
在设置`div`元素的`margin-left`和`margin-right`为`auto`时，Firefox和IE的表现不一致，IE可能需要额外的定位或尺寸计算来达到预期的居中效果。 ### 13. Body 文本对齐 在Firefox中，当`body`元素的`text-align`...
上述方法可以分别针对IE8、IE7、IE6和IE7+版本的浏览器覆盖样式。 d. CSS Hack：利用不同浏览器在解析CSS规则时的差异进行特性检测和修复，例如使用特定的CSS选择器后缀，如空格、大于号等。 3. 针对IE浏览器的...