测试代码：<!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的一些属性，如：
以上就是border-radius ie8兼容处理方法介绍的详细内容。