最近做了一个项目,是让兼容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,完毕