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

版权声明： https://blog.csdn.net/lhjuejiang/article/details/82822253

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