CSS兼容IE6/7/FF技巧与解决方案

本文主要探讨了浏览器兼容性在CSS设计中的重要性，特别是针对IE6、IE7和Firefox（FF）这三个浏览器版本的差异。CSS样式在不同浏览器上的表现可能会有所偏差，尤其是在完全使用DIV+CSS布局的网站中，确保跨浏览器的一致性至关重要。 1. IE6和IE7专有的CSS特性： - IE6专用`:height:100px;`：这种写法只在IE6中生效，用于为这个特定浏览器提供特有的CSS规则。 - IE6专用`*height:100px;`：`*`选择器是IE6的扩展，用于处理一些非标准CSS，但已被废弃，建议避免使用。 - IE7专用`*+height:100px;`：`*+html`是IE7特有的前缀，用于指定仅应用于紧跟在HTML元素之后的第一个`<div>`的CSS规则。 2. 使用!important解决兼容性： - 在IE6中，由于对`!important`的支持，可以通过在CSS中使用`width:100px!important;`来强制应用宽度为100px的规则，但在现代浏览器（如IE7及FF）中，应保留正常的规则`width:80px;`以保持兼容性。这是一种不太推荐的方法，因为它可能会干扰其他地方的优先级设置。 3. 专门针对Firefox的解决方案： - `*html#wrapper{width:80px;}`：使用`*html`选择器是为了针对IE6，但需注意Firefox不支持。 - `*+html#wrapper{width:60px;}`：使用`*+html`选择器针对IE7，确保放在`*html`选择器之后，因为`*+html`只匹配紧跟在`*html`之后的元素。 4. 万能float闭合： 在处理多列或浮动元素对齐问题时，可能存在“浮动塌陷”现象。使用一个万能的闭合方法可以帮助修复这种问题，但具体实现依赖于具体的设计需求和场景。 确保CSS在IE6、IE7和FF之间的兼容性需要开发者掌握特定的技巧和规则，比如使用选择器的前缀、优先级声明以及考虑特定版本浏览器的行为。遵循最佳实践并测试在实际环境中的表现，是确保网站在各种浏览器上都能正确显示的关键。