border-radiusIE8兼容处理方法介绍

来源：百万美食网

根据canisue（http://caniuse.com/#search=border-radius），border-radius兼容性如下图所示：

测试代码：

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title></title>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 
 #header {
 width: 400px;
 height: 400px;
 margin: 10px;
 border-radius: 10px;
 border: 1px solid red;
 }
 </style>
 </head>

 <body>
 <div id="header">
 </div>
 </body>

</html>

IE8浏览器效果：

border-radius在IE8浏览器兼容方案：

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title></title>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 
 #header {
 width: 400px;
 height: 400px;
 margin: 10px;
 border-radius: 10px;
 border: 1px solid red;
 /*关键属性设置 需要把路径设置好*/
 behavior: url(PIE.htc);
 }
 </style>
 </head>

 <body>
 <div id="header">
 </div>
 </body>

</html>

IE8浏览器下效果：

PIE.HTC下载地址：http://css3pie.com/

PIE可以处理CSS3的一些属性，如：