解决IE8下不支持border-radius的问题

最近做了一个项目,是让兼容IE8浏览器的,遇到了IE8不支持border-radius和box-shadow的问题,在网上找了解决方案,主要是借助于PIE.htc,具体的过程,发一个写的比较好的文章(看连接文章之后,如果您还没有解决问题,建议回过头来看看我下面的注意事项,否则可能有坑哦,绝对是善意的提醒,本人就是从坑中爬了好久才爬出来的)

https://blog.csdn.net/jiang_fulai/article/details/80005476

相比其他文章,这个是比较详细的了,但需要注意一个问题:

注意:PIE.htc路径是相对于html文件的,而不是当前css文件哦(通俗点说就是,看从html怎么能找到PIE.htc文件,如果PIE.htc和html同级,就直接 :behavior: url(PIE.htc),如果PIE.htc在html的子辈级,比如在css文件夹下,就是behavior: url(css/PIE.htc))

看个例子:

如果PIE.htc和index.html在同级目录下,index.css是在css文件夹下,如图所示:

那index.css代码如下:

.wrap{
    width:100px;
    height:100px;
    background-color: #5bc0de;
    border-radius: 50%;
    behavior: url(PIE.htc);
}

切记:不要写成

.wrap{
    behavior: url(../PIE.htc);
}

为了更好的理解,再看个例子:

html,PIE.htc,css的存放路径如下图所示:

index.css代码如下:

.wrap{
    width:100px;
    height:100px;
    background-color: #5bc0de;
    border-radius: 50%;
    behavior: url(css/PIE.htc);
}

那,如果您实在不理解,简单点的办法,把PIE.htc放在与html同级目录下,那css中引入htc的写法就是:behavior: url(PIE.htc);

还可以利用PIE.htc解决其他IE8不兼容的问题,比如box-shadow, 背景颜色透明度问题等等很多,box-shadow和border-radius的解决方法是一样的,背景颜色透明度问题,看下面的例子:(IE8不支持rgba,当然针对背景颜色透明度问题,网上还有其他的办法,可以自行百度哦)

  behavior: url(PIE.htc);
  background: rgba(0, 0, 0, 0.55);
  -pie-background: rgba(0, 0, 0, 0.55);

ok,完毕 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值