在"Div+CSS通用兼容性代码整理"这篇文章中,主要探讨了如何确保在不同浏览器版本(包括IE6、IE7、IE8、Firefox等)中使用CSS和HTML实现一致的布局和设计。文章重点介绍了几个关键的兼容性技巧和示例,以解决跨浏览器兼容性问题。
首先,提到的一种常见方法是在CSS样式表的开始添加针对IE6的特定规则,如`*html{padding:0px}`,这有助于清除潜在的行内元素间距问题。接下来是"ClearFix"技巧,它通过伪元素`:after`和CSS的`display`属性来清理浮动,确保在所有浏览器中都能正确地进行元素布局。
对于高度兼容性,文章提供了四个具体的案例:
1. **兼容所有浏览器高度**:使用`Height`属性并结合`\9` hack(仅在IE8及以上版本),以及使用`!important`标记确保在不同浏览器中的优先级。例如,`.warp`元素高度设置为100px,IE8以上版本为110px,IE7使用`!important`指定为120px,IE6则为130px(虽然在实际开发中,通常会避免使用双重星号选择器`*height`)。
2. **IE6和IE7高度相同,FF不同**:在这种情况下,可以只针对IE6和IE7设置高度,其他浏览器保持默认,例如 `.warp{Height:100px; *height:120px;}`。
3. **针对每个浏览器的特定代码**:对于完全不同的高度需求,可以为每种浏览器编写独立的`.warp`类,比如`.warp{height:200px}`(通用浏览器)、`.warp{height:300px\9}`(IE8)以及针对IE6和IE7的`*html.warp{height:210px;}`和`*+html.warp{height:300px;}`。
4. **高度仅在IE6中不同**:当高度需求仅适用于IE6时,可以通过选择器限制其应用,如`.ie6-only .warp{height:特定值;}`。
文章强调了使用CSS hack(如`\9` hack和双星号选择器)以及考虑不同浏览器的行为差异来解决兼容性问题的重要性。通过这些技巧,开发者可以确保在不同浏览器环境下提供一致的用户体验。同时,随着现代浏览器对CSS标准支持的提升,使用更现代的语法和CSS特性逐渐成为趋势,但在过渡期间,了解和掌握这些兼容性代码仍然是必不可少的。