首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >border-radius 兼容 IE8浏览器

border-radius 兼容 IE8浏览器

作者头像
王小婷
发布2020-06-03 15:40:04
1.2K0
发布2020-06-03 15:40:04
举报
文章被收录于专栏:编程微刊编程微刊

我们都知道,前端开发最让人头疼的事情,就是兼容ie系列的浏览器了,不但麻烦还让人头秃,今天记录一个border-radius属性IE8浏览器兼容的问题。在IE8浏览器里面,border-radius这个属性是不起作用的,这个时候,就需要进行一些处理了,首先下载pie.htc文件pie.htc是一个可以解决IE6/7/8无法支持CSS3属性的文件

PIE.HTC下载地址:http://css3pie.com/download-latest-1.x

下载完成之后,将PIE.js文件引入

<script src="PIE.js"></script>

并且在样式里面引入PIE.htc文件,注意一下文件的路径

border-radius: 4px;
 /*关键属性设置 需要把路径设置好*/
behavior: url(PIE.htc);  

参考代码如下所示:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>IE8浏览器兼容border-radius</title>
   <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="PIE.js"></script>
    <style>
        .btn {      
            width: 80px;
            height: 30px;
            line-height: 30px;
            background: #6EBF00;
            color: #FFFFFF;
            cursor: pointer;
            text-align: center;
            border-radius: 4px;
            /*关键属性设置 需要把路径设置好*/
            behavior: url(PIE.htc);         
        }
    </style>
</head>
<body>
<div class="btn">按钮</div>
<script>
</script>
</body>
</html>

这个时候打开IE8浏览器,就可以看到,border-radius起作用了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档