CSS常见兼容性问题及解决方法的总结

浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。

这里谈到的浏览器，主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等。 但更多的兼容还是考虑IE6/IE7/FF之间的斗争

先来谈谈CSS Hack

我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack.

CSS hack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。

（1）IE条件注释法，即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。

<!-- lt是小于 gt是大于 lte是小于等于 gte是不小于 !是不等于 -->

<!-- [if IE]>
 你想要执行的代码 
<![endif]-->

<!-- [if lt IE 8]>
 你想要执行的代码 
<![endif]-->

<!-- [if ! IE 8]>
 你想要执行的代码 
<![endif]-->

(2)CSS属性前缀法，即是给css的属性添加前缀。比如 * 可以被IE6/IE7识别，但 _ 只能被IE6识别，IE6-IE10都可以识别 "9"，IE6不能识别!important FireFox不能识别 * _ 9

可以先使用“9"标记，将IE分离出来，再用”*"分离出IE6/IE7，最后可以用“_”分离出IE6

.type{
 color: #111; /* all */

 color: #2229; /* IE */
 *color: #333; /* IE6/IE7 */
 _color: #444; /* IE6 */
 }

所以可以按着优先级就能给特定的版本捎上特定颜色

可以先使用“9"标记，将IE分离出来，再用”*"分离出IE6/IE7，最后可以用“_”分离出IE6

.type{
 color: #111; /* all */

 color: #2229; /* IE */
 *color: #333; /* IE6/IE7 */
 _color: #444; /* IE6 */
 }

所以可以按着优先级就能给特定的版本捎上特定颜色

为什么说一般呢...你看看下面这个例子，IE6貌似还认得出!important

其实也能看出来了，当属性一起写在{}里头时，前者肯定会被后者覆盖。要使!important有效，就应置于多个{}间。

 h1{color: #f00 !important; }
 h1{color: #000;}
 h2{color: #f00 !important; color: #000;}

<h1>test1</h1>
<h2>test2</h2>

说明：在标准模式中