我们都知道,前端开发最让人头疼的事情,就是兼容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起作用了。