[分享]css兼容怎么写ie8

CSS 兼容 IE8 的写法:/一般情况下，我们可以添加如下代码来兼容IE8/ /其中，ie8.css 就是我们为 IE8 单独编写的 CSS 文件/ /在 CSS 样式代码中，有一些语法在 IE...

CSS 兼容 IE8 的写法:

/*一般情况下，我们可以添加如下代码来兼容IE8*/
<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
/*其中，ie8.css 就是我们为 IE8 单独编写的 CSS 文件*/

/*在 CSS 样式代码中，有一些语法在 IE8 中会不被支持，这里列举几个常见的样式问题*/

/*1. rgba() 颜色值*/
/*对于 IE8，我们需要使用 filter 属性来实现一个近似 rgba() 颜色值的效果*/
div{
    background: rgb(255, 0, 0); /*fallback color: solid red*/
    background: rgba(255, 0, 0, 0.5); /*semi-transparent red*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000); /*for IE8*/
}

/*2. box-shadow*/
/*IE8 中不支持 box-shadow 属性，我们需要使用 drop-shadow 来实现类似效果*/
div{
    -webkit-box-shadow: 10px 10px 10px #888;
    -moz-box-shadow: 10px 10px 10px #888;
    box-shadow: 10px 10px 10px #888;
    
    /*IE8*/
    filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=10, OffY=10, Color=#888);
}

/*3. 媒体查询*/
/*IE8 不支持媒体查询，我们可以使用 respond.js 或者 css3-mediaqueries-js 来实现类似效果*/
/*respond.js：*/
<!--[if lt IE 9]>
    <script src="respond.js"></script>
<![endif]-->
/*css3-mediaqueries-js：*/
<!--[if lt IE 9]>
    <script src="css3-mediaqueries.js"></script>
<![endif]-->