解决div+css在IE6-IE9及Firefox的兼容问题

"这篇文档是关于使用div+css实现对Internet Explorer 6、7、8、9以及Firefox的兼容性优化方法的总结，基于作者十年的行业经验。文档提供了两种具体的示例，帮助开发者解决不同浏览器间的样式差异问题。" 在网页开发中，由于各浏览器对CSS的解析方式不尽相同，尤其是IE系列浏览器与Firefox之间存在较大差异，因此需要进行特定的兼容性处理。本文档主要探讨了如何通过CSS技巧使样式在这些浏览器中保持一致。 1. **浏览器兼容代码说明** - `*` 选择器：IE6和IE7支持，但其他浏览器不支持。 - `!important`: 优先级高，Firefox支持，IE6不支持，IE7和更高版本部分支持。 - `\9`: IE8及以上版本支持，其他浏览器不支持。 - `*html`: 仅IE6识别。 - `*+html`: 仅IE7识别。 2. **案例一** 这个例子是针对高度不同的情况，使用不同的CSS规则来适应各个浏览器。首先，设置通用的高度值 `.warp{Height:100px;}`，然后通过特定的浏览器识别符进行调整： - IE8识别 `Height:110px\9;` - IE7识别 `*height:120px!important;` - IE6识别 `*height:130px;` 注意：`!important` 的优先级高于通配符 `*`，所以即使在IE6中，120px的高度会被130px覆盖。 3. **案例二** 此案例主要解决的是水平居中和Firefox的特定处理问题： - DOCTYPE会影响CSS的解析方式，需要确保正确的DOCTYPE声明以触发标准模式。 - Firefox可以通过设置 `margin-left` 和 `margin-right` 为 `auto` 来实现元素的水平居中，而IE则需要更复杂的处理。 - Firefox在设置 `padding` 后会影响元素的 `height` 和 `width`，但IE不会，需要额外设定高度和宽度。 - 使用 `!important` 可以为Firefox设置特别的样式，而IE会忽略。 - 垂直居中可以通过 `vertical-align:middle;line-height:200px;` 实现，但需注意避免内容换行。 通过这些技术，开发者可以有效地解决跨浏览器的样式兼容问题，确保在不同浏览器中呈现一致的页面效果。然而，随着浏览器更新和技术进步，现代浏览器对CSS3的支持更加广泛，很多以前的兼容性问题已不再那么突出，但仍有必要了解这些历史遗留的解决方案，以便应对仍需支持旧版浏览器的项目。