针对不同的浏览器写不同的CSS code

网络整理 - 07-27

首先建站学带你了解下什么是CSS hack：

CSS hack由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!

我们先看下不同浏览器之间的区别：

IE6比较老的版本浏览器，用户比较多，
IE7较新浏览器，更接近标准浏览器，
IE8算是微软标准浏览器，但差别于浏览器，
火狐（Mozilla, Firefox）和谷歌浏览器（chrome）是比较标准的IE浏览器，一般我们以这个浏览器为开发参考平台，同时IE8与这两个浏览器解释CSS比较接近，一般只要通过火狐、谷歌浏览器测试兼容，一般就能确定IE8.

因此一般我们区别这些浏览器CSS hack的方法就变得简单，我们只需考虑IE6\IE7\火狐（Firefox）这3个浏览器即可兼容全部浏览器。
具体区别如下：
区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;以下是各浏览器CSS hack表格

另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6，IE7，firefox: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

以上是介绍区别各浏览器的CSS hack的写法，下面我们简单介绍这些CSS hack用法：

要求说明：假如我们设置一个类名为exple的类CSS属性,CSS样式边框为1PX黑色边框，高度为100PX并要求，在IE6浏览器下宽度为100PX；IE7浏览器宽度下为150PX；火狐IE8谷歌浏览器下宽度为200PX；(PX是长度单位像素)

则CSS代码如下：
.exple{border:1px solid #000; height:100px;width:200px; *width:150px !important; *width100px;}
这样只要在html设置一个div的类(class="exple"),这样这部分在火狐、IE8、谷歌浏览器下就会显示宽度为200px高度为100px带1px的黑边框的方块；IE7浏览器宽度下为150PX高度为100px带1px的黑边框的方块；在IE6浏览器下就会显示出长度和宽度为100px的带1px黑边的正方形。

浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6

　　以: " #demo {width:100px;} "为例;

　　#demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/

　　* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */

　　*+html #demo {width:130px;} /*会被IE7执行*/

　　---------------

　　所以最后,#demo的宽度在三个浏览器的解释为:

　　FIREFOX:100px;

　　ie6:120px;

　　ie7:130px;

　　IE8 最新css hack：

　　"\9"　例:"border:1px \9;".这里的"\9"可以区别所有IE和FireFox.

　　"*"　IE6、IE7可以识别.IE8、FireFox不能.

　　"_"　IE6可以识别"_",IE7、IE8、FireFox不能.