浏览器兼容问题

LambdaTest网站

 

1.IE8不支持jpeg图片格式

2.box-shadow:2px 2px 5px #969696;属性兼容IE9及以下：

bax-shadow{
filter:progid:DxImageTransform.Microsoft.Shadow(color='#969696',Direction=135,Strength=5);//for ie6,7,8
background-color:#eee;
-moz-box-shadow:2px 2px 5px #969696; //firefox
-webkit-box-shadow:2px 2px 5px #969696; //webkit 谷歌
box-shadow:2px 2px 5px #969696; //opera或ie9
}

3.background-size:cover;兼容IE9及以下：

.imgBox{
width:100%;
height:80%;
background:url('../images/add.png') no-repeat;
background-attachment:fixed; //属性设置背景图像是否固定或者随着页面的其余部分滚动
//filter:兼容IE8及以下
filter:progid:DXImageTransform.Miscrosoft.AlphaImageLoader(src='../images/add.png',sizingMethod='scale');
-ms-filter:progid:DXImageTransfrom.Microsoft.AlphaImageLoader(src='../images/add.png',sizingMethod='scale');
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;     
}

4.border-radius:50%;兼容IE9及以下：

PIE能使IE6-9支持CSS3的一些属性，例如圆角，阴影等。它分配pie.htc和pie.js两种用法

（1）pie.htc的使用

在css片段里面加上behavior，例如：

.logo{font-size:12px;behavior:url(path/to/pie_files/PIE.htc);}

需要注意的是，behavior的路径是相对html的，而不是相对所在的css文件

2.pie.js的使用

在网页中加入PIE.js脚本，注意，用IE专用的注释，防止非IE浏览器下载

<!--[if lt IE 10]>

　　<script type="text/javascript" src="PIE.js"></script>

<![endif]-->

用js调用

$('.purchase>a').each(function(){
     $(this).css("position","relative");  //设置position属性，否则无法覆盖
     PIE.attach(this)     
})

注意点：

1.IE下这些CSS3效果实现是借助于VML，由VML绘制圆角或是投影效果的容器元素，然后这个元素作为目标元素的后兄弟节点插入，如果目标元素position:absolute或是position:relative,则这个css3-containder元素将会设置与之一样的z-index值，在DOM tree中，同级的元素总是后面的覆盖前面的，所以这样就实现了覆盖，又避免了可能有其他元素正好插入其中。所以，如果目前元素的position属性为static，也就是默认属性，则z-index属性是没有用的，无覆盖可言，所以此时IE浏览器下CSS3的渲染是不会成功的。要解决也很简单，设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值（不可为-1）

2.添加阴影时，需设置一个背景色。否则，阴影将会覆盖整个背景。以下代码在IE9及以上浏览器可正常显示。

.dis_a:hover {
box-shadow:0px 5px 30px rgb(204,204.204);
tram=nsform:translate3d(0,-8px,0);
-webkit-transfrom:translate3d(0,-8px,0);
cursor:pointer;
}