【CSS】【待更】IE浏览器各版本hack及常见兼容性问题解决

.class{
    width: 1000px\9;/* IE10 | IE9 | IE8 | IE7 | IE6 */
    width: 1000px\0;/* IE10 | IE9 | IE8 */ 
    width: 1000px\9\0;/* IE10 | IE9 */ 
    *width: 1000px;/* IE7 | IE6 */
    +width: 1000px;/* IE7 | IE6 不支持less转换,不推荐 */ 
    -width: 1000px;/* IE6 */
    width: 1000px !important;/* 除IE6之外 */  
}

1.IE7及IE7以下不支持通过display:inline-block将行内元素转为行内块级元素

 *float: left|right;/* IE7及IE7以下*/ 
display: inline-block;/* IE7以上*/ 

2.IE8及IE8以下不支持通过rgba设置有透明度的背景颜色

CSS参考手册之CSS3 filter(滤镜) 属性

会连这个容器里面的所有元素一起改变透明度

background: rgb(0,0,0)\9;/* IE9及IE9以下*/ 
filter: alpha(opacity=20)\9;/* IE9及IE9以下*/ 
//上面两句卸载前面的目的是因为\9这个hack支持IE10及以下,但是IE9支持 rgba,所以在IE9中,后面background会覆盖前面background
background: rgba(0,0,0,0.2);/* IE9及IE9以上 */  

3.IE8及IE8以下不支持通过background-size属性设置背景图片大小

4.IE8及IE8以下不支持通过box-shadow属性设置阴影

可以使用filter属性

CSS参考手册之CSS3 filter(滤镜) 属性

 filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=125, Strength=9);/* IE8及IE8以下*/ 

参数	说明
strength	阴影大小
direction	阴影方位，单位为度，可以为负数
color	阴影颜色 （尽量使用数字）

使用IE滤镜实现盒子阴影的盒子必须是行元素block或以行元素inline-block显示

4.IE8及IE8以下不支持通过:nth-child()属性选取元素

方法1.使用jquery

$(function(){
 $('.className:nth-child(even)').addClass('classname')
 }); 

方法2.使用first-child与element+element 选择器

CSS参考手册之CSS element+element 选择器 相邻兄弟选择器
CSS参考手册之CSS :first-child 伪元素

• HTML

<div class="className"></div>
<div class="className"></div>
<div class="className"></div>
<div class="className"></div>

• CSS

.className:first-child{
    // 样式
}// 选取第1个div
.className:first-child+div+div{
    // 样式
}// 选取第3个div

---

参考文档网址：
box-shadow兼容IE8浏览器写法
针对IE浏览器单独写CSS样式的几种方法
各种浏览器的Hack写法(chrome firefox ie等)
hack css编写ie下才生效的css