浏览器兼容性之CSS

CSS浏览器兼容性一直困扰着前端开发，本文专门针对CSS兼容性来详细讲解前端开发中所遇到的问题以及解决方案。

`CSS Hack`

最高级`!important`

!important在css样式中的级别最高，他能够覆盖当前元素的其它任何样式，包括行内样式。非常的牛啊！但是他对IE6兼容性并不是很友好，下面是一段很简单的HTML以及!important的部分浏览器的兼容性图：

浏览器兼容性之CSS

1	<div class="box" style="background:#ccc">div>

我们来给它设置一些样式：

.box{
  width: 200px;
  height: 200px;
  background: yellow!important;
  background: blue;
}

在常规浏览器下显示的是黄色yellow，覆盖了其它任何样式，包括行内样式。而在IE6下则显示的是灰色#ccc。

下划线`_border-bottom`

在CSS样式中我们还可以写下划线的样式如：_border-bottom、_color等，在上面代码的基础上我们来再加几个样式如下：

.box{
  width: 200px;
  height: 200px;
  background: yellow!important;
  background: blue;
  border-bottom: 10px solid green;
  _border-bottom: 10px solid red;
}

那么常规浏览器你会看到这样的效果：

浏览器兼容性之CSS

而在IE6下，我们再来看：

浏览器兼容性之CSS

很明显，我们能够看出下划线的样式在IE6下才能识别，在其它标准浏览器中不能够被认可的。我们可以通过这种方式来区别IE6下的样式就很简单了。

符号`*`和`\9`的hack

还是上面相同的HTML代码，我们增加一些样式，再加个文字，最后的代码是这样：


<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>title>
  <style type="text/css">
   .box{
    width: 200px;
    height: 200px;
    background: yellow!important;
    background: blue;
    border-bottom: 10px solid green;
    _border-bottom: 10px solid red;


    text-align: center;
    line-height: 200px;
    font-size: 100px;
    font-weight: bold;

    color: red;
    color: green\9;
    *color: white;
    _color: blue;
  }
  style>
head>
<body>
  <div class="box" style="background:#ccc">Udiv>
body>
html>

我们来看看不同浏览器的对比效果：
标准浏览器下(Chrome,Firefox,Safari)：

浏览器兼容性之CSS

IE8和IE9下：

浏览器兼容性之CSS

IE7下：

浏览器兼容性之CSS

IE6下：

浏览器兼容性之CSS

结果字体颜色出现了四种，很奇怪么？让我们来解释一下：下划线_color只能是IE6识别，其它浏览器不识别，那么IE6当然是蓝色blue了。星号*IE6和IE7能够识别，但是IE8+不能够识别，那么根据样式的优先级IE7下文字就是白色white了。那么\9的浏览器支持呢？经过测试\9在IE8和IE9下能够识别，那么IE8和IE9下字体颜色自然而然就是绿色green了。而在标准浏览器下(以Chrome,Firefox为代表)，是不能够识别*、\9、_这样一些语法的，所以字体颜色就是红色red了，被绕晕的朋友可以去点击下面的链接下载源码看看。

注意：CSS Hack书写顺序：先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的！

IE条件表达式

IE表达式是IE浏览器特有的，只能在IE浏览器下使用。是目前比较好的解决IE不同版本之间兼容问题的方案。常见的表达式如下：


<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>title>
head>
<body>
  
  
  
  
   <p>not IEp> 
  
  
  
  
  
  
  
body>
html>

解析：

lt就是less than小于的意思，lte就是less than or equal小于等于的意思。

gt就是greater than大于的意思，gte就是greater than or equal大于等于的意思。

!、&、|就相当于JavaScript中的!(非)、&(并且)、|(或者)，很好理解。

在不同浏览器中运行上面的例子看到的效果不一样。而实际的项目中我们经常会这样使用：




 <html lang="zh-CN">

然后我们就可以单独针对不同IE版本设置不同的样式，从此告别CSS Hack的烦恼，很方便，无其它不规范的CSS语法。

1
2
3

.ie7 body{}
.ie8 body{}
.ie9 body{}

CSS3兼容性写法

加前缀

CSS3语法的兼容性通常需要加浏览器的前缀，以border-radius为例：

-webkit-border-radius: 10px; /* Safari, Chrome */
   -moz-border-radius: 10px; /* Firefox */
     -o-border-radius: 10px; /* Opera */
        border-radius: 10px; /* Others Browsers */

而其它的CSS属性box-shadow、transform、transition都需要加前缀。详情参见css3please

IE6-8的滤镜

IE其独有的滤镜属性filter可以实现阴影的效果

.box-shadow {
  -webkit-box-shadow: 6px 8px 8px #ccc; /* Safari, Chrome */
     -moz-box-shadow: 6px 8px 8px #ccc; /* Firefox */
          box-shadow: 6px 8px 8px #ccc; /* Opera, IE9 */
              filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=6px, OffY=8px, Color='#ccc'); /* IE6, IE7 */
          -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=6px, OffY=8px, Color='#ccc')"; /* IE8 */
}

效果如下，第一个是标准浏览器的效果，第二个是IE6-8的效果

浏览器兼容性之CSS

解析：box-shadow有4个参数，分别为：x轴偏移值、y轴偏移值、阴影的模糊度、阴影颜色。IE的filter滤镜的三个参数：offX（X轴偏移值）、offY（Y轴偏移值）、Color（阴影颜色）。

CSS3渐变`gradient`

.gradient{
      background-image: -moz-linear-gradient(top, #cccccc, #000000); /* Firefox */
      background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #cccccc),color-stop(1, #000000)); /* Safari, Chrome */
　　            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000', GradientType='0'); /* IE6, IE7 */
　　        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000',GradientType='0')"; /* IE8 */
}

浏览器兼容性之CSS
解析：

-moz-linear-gradient的参数分别是：线性渐变的方向（top是从上到下、left是从左到右，left top是从左上角到右下角）。最后两个参数分别是起点颜色和终点颜色。如果有更多的参数，表示多种颜色的渐变。

-webkit-gradient一共有五个参数。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（辐射渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。

IE滤镜渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。