日期:2014-05-17  浏览次数:20580 次

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。

?

?

?