Firefox与IE CSS样式差异与 hack技巧详解

本文档深入探讨了Firefox与IE（尤其是IE6、IE7）在CSS样式表中的差异。首先，提到使用`!important`属性来解决跨浏览器兼容性问题，这在Firefox和IE6中通常有效，但IE7能够正确解析`!important`，可能导致页面布局不符合预期。为了解决IE7的兼容性问题，文档推荐使用`*+html`选择器进行hack，比如设置不同颜色以适应不同的浏览器版本： ```css #1 { color: #333; /* Moz (Firefox) */ *html #1 { color: #666; } /* IE6 */ *+html #1 { color: #999; } /* IE7 */ } ``` 其次，关于CSS布局的居中问题，虽然`text-align: center;`在IE中可以实现基本居中，但在Firefox中可能失效。为确保兼容性，需要在子元素中额外添加`margin-right: auto; margin-left: auto;`。若要全局居中页面，建议避免使用`<div>`包裹，而是拆分多个`div`并单独应用居中样式。 文档还提到了盒模型的解释差异。在IE6中，可能需要为`width`属性使用特殊的hack规则，如`width:500px\9;`，而在Firefox和IE6+下，可以直接使用`width:600px;`。而在Firefox中，如果希望强制宽度，可以使用`width: 600px !important;`。 最后，讨论了浮动元素在IE中的特殊行为。当使用`float: left;`和`margin: 0 0 100px;`时，IE会产生额外的200px间距，这是因为IE对浮动元素的理解与标准浏览器不同。为避免这个问题，可以考虑将浮动元素转换为`display: inline;`，或者通过其他布局技术来调整间距。 这份文档提供了在开发过程中处理Firefox和IE浏览器兼容性问题的重要技巧，涵盖了CSS样式表的多方面，帮助开发者更好地理解和解决跨浏览器的CSS差异。