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