css兼容与差别　IE6,IE7,IE8,FireFox,Opera,Safari.doc

CSS兼容性问题一直是Web开发者面临的挑战之一，不同的浏览器由于内核差异，对于CSS的理解和解析方式有所不同，导致在不同浏览器中展示的效果可能不一致。针对IE6、IE7、IE8、Firefox、Opera和Safari这几种常见的浏览器，我们需要特别关注它们之间的差异。 标题和描述中的文档"css兼容与差别　IE6,IE7,IE8,FireFox,Opera,Safari.doc"主要探讨的是如何解决这些浏览器中的CSS兼容性问题。 1. **浮动(float)**：在示例代码中，我们可以看到针对不同浏览器的浮动样式设置。`float:left;`是标准CSS属性，适用于所有现代浏览器。`#float:none;`和`_float:none;`是针对早期IE版本的hack，其中`#`前缀在IE7中被忽略，`_`前缀在IE6中被识别。`*+html`和`* html`选择器则是针对IE6和IE7的特定hack。 2. **内联样式处理**：对于内置样式，我们看到多个版本的`float`属性，每个版本都针对不同的浏览器。例如，`[float:none;]`是专门为Safari设计的，而`-moz-text-overflow`等则是其他非IE浏览器的私有属性。 3. **文本溢出隐藏(text-overflow)**：为了实现文本超出容器宽度时自动隐藏并显示省略号，可以使用CSS3的`text-overflow:ellipsis;`。但是，不同浏览器对这个属性的支持程度不同，需要添加各种私有属性如`-o-text-overflow`，`-webkit-text-overflow`等来确保兼容性。 4. **CSS优先级(!important)**：`!important`用于提高样式的优先级，使得该样式覆盖其他相同的选择器。IE6不支持`!important`，而IE7开始支持，但同时仍保留了对`*` hack的支持。IE8、Firefox、Opera和Safari都支持`!important`，并且按照其规则解析样式。 5. **浏览器内核**：不同浏览器使用不同的渲染引擎，例如： - Firefox使用Gecko内核。 - Internet Explorer使用Trident内核，从IE8开始部分支持标准CSS。 - Opera使用Presto内核，后来改用Blink内核。 - Konqueror使用KHTML内核，Safari和旧版Chrome早期也使用此内核，但现在使用WebKit。 - Safari和Chrome使用WebKit（Swift）内核，是KHTML的衍生。 6. **私有属性和浏览器兼容性**：各浏览器通常有自己的私有属性，以`-xxx-`开头，如`-moz-`对应Gecko，`-webkit-`对应WebKit，`-o-`对应Presto等。这些属性在浏览器升级或CSS规范被广泛接受后可能变得通用。 解决CSS兼容性问题需要深入了解各个浏览器的特性，并灵活运用条件注释、CSS hack以及渐进增强或优雅降级策略。通过这种方式，可以确保网页在各种浏览器中都能呈现良好的用户体验。同时，随着浏览器的不断更新和CSS标准的推进，这些问题正在逐渐减少，但仍然需要开发者保持警惕，特别是在维护旧项目时。