css hack总结

 

CSS Hack

关于ie6 的容器撑开。貌似 ie 下面有一个容器纵向撑开的问题。有时我们需要高度自适应。在 ie6 下，是没有固定高度这一个说法的， height 就是相当于 min-height （ ie6 下是没有 min-height 的）。因为容器会被内容的高度撑开从而自适应高度。所以只要设定了初始高度 height ， ie6 的高度自适应很好实现。而在 ff 下就不能写死 height ，需要写 min-height ，但是 ie6 又不认 min-height ，这就陷入了矛盾中了。所以应该用一种 css hack 的方式写如

 

#header{width:600px;
min-height:50px;给ff和ie7看
_height:50px;给ie6看，且只有ie6看得懂
}

 

什么是css hack呢，就是针对不同的浏览器写不同的css代码还都写在一块。比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等。

又有一个例子：

　　<style>

　　div{ 　　background:green; /* for firefox */ 　　
                   *background:red; /* for IE6 IE7 */ 　　} 　　
     </style> 

 

 

这里显而易见的，ff将第二个css语句过滤掉了，所以是绿的。而ie6两个都能识别，但是因为先后顺序就是红的。

好像还有一个"\9"会被所有的ie浏览器识别而ff不行。

 

 

ie6下的min与max

我之前研究过一些css模板的代码。里面有一段是这么写的。

	div#my_div {
                background-color: red;
                min-width: 100px;min-height: 100px; /*For ff and ie7+*/   
                max-width: 200px;max-height: 200px; /*For ff and ie7+*/
                _height: 100px; /*For IE6 only min-height */
                _width: 200px; /*For IE6 only min-width */
                _height:expression(this.scrollHeight>200? "200px":"auto");/*For IE6 only max-height*/
		_width: expression(this.scrollWidth > 200? "200px":"auto");/*For IE6 only max-width*/
            			}

 这里就是css hack。前面两个其实就是max-width 和max-height的代码翻译，但是呢，这个expression是不怎么靠谱的，因为它不是万能的，因为在firefox和ie8+就有问题了，会不执行这些语句的。所以只有在ie6和ie7有用，但是呢ie7是支持min和max的，所以我们只要写给ie6看。就成了上面我们写的代码。但是呢，尽量还是不要expression，因为它很耗资源而且兼容性极差。

 

还有一些hack，如!important 。举个例子

.classA{ font-size: 68px !important; font-size: 12px }

在ff和ie7+里，会正确的解释!important，也就是字体会是68px，而在ie里面!important会被完全地忽略，也就是12px。很多人说ie6对!important是完全不支持的，实际不然。如果这样写

.classA{ font-size: 68px !important;}

.classA{font-size:12px}

那么ie6将正确执行!important，也就是68px。