border-radius 兼容 IE8浏览器

男娘i 2023-02-14 10:38 124阅读 0赞

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

**PIE.HTC**下载地址：[http://css3pie.com/download-latest-1.x][http_css3pie.com_download-latest-1.x]

下载完成之后，将PIE.js文件引入

并且在样式里面引入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起作用了。  
![format_png][]

[http_css3pie.com_download-latest-1.x]: http://css3pie.com/download-latest-1.x
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTg1YWZiYTc1NDQ3OTBmZTEucG5n?x-oss-process=image/format,png