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

蔚落 2022-05-10 00:26 375阅读 0赞

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

[https://blog.csdn.net/jiang\_fulai/article/details/80005476][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文件夹下，如图所示：

![70][]

那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的存放路径如下图所示：

![70 1][]

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，完毕

[https_blog.csdn.net_jiang_fulai_article_details_80005476]: https://blog.csdn.net/jiang_fulai/article/details/80005476
[70]: /images/20220510/94217e9167df454aa2d4a29310a1179b.png
[70 1]: /images/20220510/db0ff02ad6e248f8a17419a9fba3a6aa.png