我們都知道，前端開發最讓人頭疼的事情，就是兼容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起作用了。
