CSS hack 针对IE6，IE7，firefox显示不同效果

CSS hack是一种网页设计技术，通过利用浏览器之间的差异，让不同浏览器显示不同的样式。针对IE6、IE7和Firefox显示不同效果的CSS hack是前端开发中常见的需求，特别是在使用CSS+DIV布局时。本文将详细讲解如何使用CSS hack来区分这三种浏览器，并提供一些实用的技巧和方法。 我们需要了解IE6、IE7和Firefox对CSS属性支持的差异。IE6是一个较为特殊的浏览器，它不支持CSS2的大部分新特性，并且对于一些CSS选择器和属性存在解析上的问题。IE7在某些方面对CSS的支持有所改进，但仍与标准的浏览器存在差距。而Firefox作为一款遵循标准的浏览器，它的CSS支持相对较好，但也有一些兼容性问题。 为了区分这些浏览器，我们可以通过添加特定的CSS选择器或者属性来实现。一般有以下几种方法： 1. 通过*选择器和!important声明来区分IE6和Firefox： - Firefox不能识别*选择器，但能识别!important。 - IE6能识别*选择器，但不能识别!important。 - IE7既识别*选择器也识别!important。 2. 使用_下划线来区分IE6和IE7及Firefox： - IE6支持下划线，而IE7和Firefox都不支持。 - 通常在CSS属性值前添加下划线，仅IE6能识别。 具体的CSS hack写法如下： - 区别IE6与Firefox：background: orange; *background: blue; - 区别IE6与IE7：background: green !important; background: blue; - 区别IE7与Firefox：background: orange; *background: green; - 综合区分IE6、IE7和Firefox：background: orange; *background: green; _background: blue; 请注意，以上CSS写法中，firefox的样式应该写在最前面，IE7的样式在中间，IE6的样式放在最后面，这是因为浏览器解析CSS是从上到下逐行进行的，后面的样式会覆盖前面的样式，而后面的浏览器覆盖前面的浏览器。 除了上述方法之外，还有利用CSS选择器结合文档类型声明（DTD）的方法，如使用*html和*+html选择器来区分IE6、IE7和标准浏览器，但这种方法需要在HTML文档的顶部声明正确的DOCTYPE。正确的声明会触发标准模式，而错误的或者缺失DOCTYPE则会导致IE浏览器进入“怪异模式”，从而改变CSS解析规则。 此外，对于浮动（float）元素的处理，也是CSS布局中常见的问题。为了确保容器能适应浮动子元素的高度，通常需要清除浮动。一个常用的方法是使用一个clearfix类，它通过添加一个伪元素来清除浮动。具体实现如下： ```css .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* IE6/7专有 */ .clearfix { *display: inline; zoom: 1; } ``` 这段代码通过伪类`:after`动态添加一个内容为空的块级元素，并设置`clear:both;`属性来清除浮动。`display: inline-block;`属性确保了clearfix类在不同浏览器中正常工作，而`_display: inline;`是针对IE6/7的HACK。为了确保IE6可以识别这一HACK，需要在HTML文档的顶部声明正确的DOCTYPE。 在实践中，为了简化开发和维护过程，通常会采用一些已有的类库来处理CSS hack和浮动问题。这些类库通常包括了对各种浏览器兼容性的处理，能够帮助开发者更快速地开发出符合标准的网页。在使用这些工具时，我们仍然需要了解其原理和适用情况，以便在特定的场合下做出正确的选择。