关于CSS常见兼容性问题

整理了一下自己遇到的css兼容性问题。

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

说到兼容性，不得不提到IE，也就是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: #222\9; /* IE */
    *color: #333; /* IE6/IE7 */
    _color: #444; /* IE6 */
    }
所以可以按着优先级就能给特定的版本捎上特定颜色

一般来说，只有IE6不支持 !important
所以可以这样
#example{
    width: 100px !important; /* IE7  FF */
    width: 110px; /* IE6 */
因为!important 具有最高优先级，所以此种方式可以区别出来~

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

【CSS常见兼容性问题总结】常见浏览器兼容性问题与解决方案

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



（3）选择器前缀法，顾名思义，就是给选择器加上前缀。

IE6可识别 *div{color:red;}  
IE7可识别 *+div{color:red;}

主要的兼容性问题

平时在写代码之前，一般要在引入css样式表之前先导入cssReset。

雅虎的重置样式路径如下：

http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset.css；