CSS hack 初学小结



什么是浏览器HACK:当我们使用不同的浏览器(Firefox,IE7, IE6, IE 8, Safari, Opera, chrome)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常,我们在编写CSS的时候会很恼火,刚修复了这个浏览器的问题,结果另外一个浏览器却出了新问题。而HACK就是一种办法,能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵!



第一个HACK,IE FF 所有浏览器 公用(其实也不算是HACK)

height:100px;

第二个HACK IE6专用

_height:100px;

第三个HACK IE6 IE7公用

height:100px;


介绍完了这三个HACK了,下面我们再来看看如何在一个样式里分别给一个属性定义IE6 IE7 FF专用的HACK,看下面的代码,顺序不能错哦:


程序代码


height:100px;

height:120px;

_height:150px;


下面我简单解释一下各浏览器怎样理解这三个属性:


在FF下,第2、3个属性FF不认识,所以它读的是 height:100px;


在IE7下,第三个属性IE7不认识,所以它读第1、2个属性,又因为第二个属性覆盖了第一个属性,所以IE7最终读出的是第2个属性 height:120px;


在IE6下,三个属性IE6都认识,所以三个属性都可以读取,又因为第三个属性覆盖掉前2个属性,所以IE6最终读取的是第三个属性。


CSS Hack 的内置与外置写法


外置:


.main{ float:left;#float:none;_float:none;



html.main{ float:left;#float:none;_float:none; }



+html .main{ float:left;#float:none;_float:none; } 



html .main{ float:left;#float:none;_float:none; }



     第1行给Firefox以及其他浏览器看

     第2行给safari/IE6/iE7看,如果safari/IE6/iE7 视觉效果不统一,就要在后面跟IE6/IE7的定义

     第3行给IE7看

     第4行给IE6以及更老的版本看


内置:


.main{ float:left;#float:none;float:none;[float:none;]float:none; }



     第1个float给Firefox以及其他浏览器看

     第2个加#的float给IE7看

    * 第3个加的float给IE6以及更老的版本看

     第4个加[的float给safari看

     第5个加]的float给IE看



仅 Safari 和 Opera 识别的 Hack


@media all and (min-width: 0px)

{/ Safari and Opera  rules here /}


或者


@media screen and (-webkit-min-device-pixel-ratio:0)

{/ Safari and Opera rules here /}


注:这里所指代的 Safari 和 Opera 一般为最新版本。


仅 Firefox 3 和 IE7 识别的 Hack


selector, x:-moz-any-link, x:default

{/ Firefox 3  and IE7 rules here /}


使用方法例:




@media screen and (-webkit-min-device-pixel-ratio:0)

{

.box{width:100px;}

/ Safari and Opera rules here /

}