浏览器兼容性详解：IE6与IE7的困扰与解决方案

"ie6,ie7兼容性总结 - 愚公之资料库系列" 在Web开发过程中，IE6和IE7的兼容性问题一直困扰着开发者。这两个早期版本的Internet Explorer浏览器对Web标准的支持并不完全，导致了许多布局、样式和功能上的差异。以下是一些关键的兼容性问题及其解决方案： 1. **文字大小不兼容**：在IE6和IE7中，同样的`font-size`值可能导致文字占用的高度与其它浏览器不同。例如，宋体在IE6下实际高度为16px，而Firefox（FF）为17px。解决方法是通过设置`line-height`确保文字有统一的行高。 2. **容器高度限制**：在FF中，设置了`height`的容器不会因内容增加而扩展，但在IE中则会。因此，除非必要，应避免为容器设定固定高度。 3. **横向撑破容器**：在FF中，没有定义宽度的浮动容器会根据内容自动扩展宽度，而IE则会优先考虑内容折行。因此，为可能被内容撑破的浮动容器定义`width`是很重要的。 4. **双倍边距问题（Double-Margin Bug）**：IE6下，给浮动元素设置`margin-left`或`margin-right`会导致实际效果是设置值的两倍。修复方法是为浮动元素添加`display:inline`。 5. **镜像边距问题（Margin Mirror Bug）**：当外层元素内部包含浮动元素时，IE6可能会出现两侧边距不对称的问题。可以通过在外部元素上设置`hasLayout`属性（如`zoom: 1`）来解决。 6. **透明度支持**：IE6和IE7不支持CSS的`opacity`属性，可以使用滤镜（`filter`）属性来模拟透明效果，例如`filter: alpha(opacity=50)`。 7. `box-sizing`属性：IE6和IE7不支持`box-sizing`，默认采用不同的盒模型。可以使用`*{box-sizing:border-box}` hack来让它们的行为更接近现代浏览器。 8. **PNG透明图象问题**：IE6对PNG24位图象的透明支持不足，需要使用特定的滤镜如`progid:DXImageTransform.Microsoft.AlphaImageLoader`来实现透明效果。 9. **浮动元素清除**：IE6和IE7对浮动元素的清除方式与现代浏览器有所不同，可以使用`clearfix`类或者`clear:both`来解决。 10. **CSS表达式（Expression）**：IE6和IE7支持CSS表达式，这是一种动态计算属性值的方式，但现代浏览器不支持，且性能较差，应尽量避免使用。 11. **浮动元素父级高度塌陷**：IE6和IE7中，如果浮动元素的父级没有内容或高度没被固定，可能会导致父级高度塌陷。可以使用`clearfix`类或者`overflow:hidden`来解决。 12. **边距重叠问题**：在某些情况下，相邻元素的外边距会在IE6和IE7中合并，可以使用`display:inline-block`或`float`来防止这种现象。 13. **CSS伪类选择器支持**：IE6仅支持`:hover`伪类，而IE7开始支持`:first-child`，但都不支持`:before`和`:after`。可以使用条件注释或Modernizr等库来解决。 14. **JavaScript兼容性**：IE6和IE7对某些JavaScript特性支持有限，例如它们不支持`addEventListener`和`removeEventListener`，可以使用`attachEvent`和`detachEvent`作为替代。 解决这些兼容性问题通常需要开发者对各种浏览器的工作原理有深入理解，并能熟练运用各种技巧和hack。随着IE6和IE7市场份额的下降，现代浏览器对Web标准的更好支持，这些问题逐渐变得次要，但理解它们对于维护旧项目或照顾到仍有使用这些浏览器的用户仍然是必要的。