关于box-shadow、border-radius不兼容ie8的解决办法

本来从css3兼容ie9+挺好的,可是总有一些共识要求ie8+,于是就有了我们的苦逼的找解决办法。之前在网上查到一些说用 PIE.htc

先说 box-shadow:

<style>

.div{

width:500px;

height:200px;

border: 1px solid #eaeaea;

behavior: url(pie.htc);

 

-moz-box-shadow: 0px 0px 14px 1px #eaeaea;

-webkit-box-shadow: 0px 0px 14px 1px #eaeaea;

 box-shadow: 0px 0px 14px 1px #eaeaea;

 

}

 

</style>

<div class="div">

   边框阴影
</div>

 

可是ie8下不支持就加上PIE.htc,注意上边的连接地址,需要注意的有两点:

    1.这个文件应该放到和.html文件同级位置。(下载地址:http://css3pie.com/download/)

可是ie8下不支持就加上PIE.htc,注意上边的连接地址,需要注意的有两点:

    1.这个文件应该放到和.html文件同级位置。(下载地址:http://css3pie.com/download/)

这个就可以

 2.虽然文件名称是大写,如果确保路径没问题还不管用时候就试试小写

border-radius:

这个是在做上传头像时候。就是不管你的头像是什么形状,放进去后就是圆的,类似于这样

里边的图片就是这样的,

同样的

<style>

p{ 

width: 135px;

 height: 135px;

border: 1px solid #ddd; 

text-align: center; 

behavior: url(pie.htc);

border-radius: 50%; 

overflow: hidden;

 

}

</style>

<p>
<img src="images/ac1.jpg" alt="" width="232">
</p>

可是ie8下不支持就加上PIE.htc,注意上边的连接地址,需要注意的有两点:

    1.这个文件应该放到和.html文件同级位置。(下载地址:http://css3pie.com/download/)

这个就可以

2.虽然文件名称是大写,如果确保路径没问题还不管用时候就试试小写

 最后找解决办法的时候发现PIE.htc这个还是可以解决好多属性值,因为没用到就不一 一说了,有兴趣的可以自己去查查。

介绍htc,它可以让IE浏览器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。。(可以参考这个  https://zhidao.baidu.com/question/2119635727166906667.html)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值