如何让IE7,IE8支持border-radius

最新推荐文章于 2022-12-08 17:31:03 发布

原创最新推荐文章于 2022-12-08 17:31:03 发布 · 514 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ie圆角兼容 #border-radius

收录于

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何通过在HTML meta标签中添加特定代码来实现border-radius圆角元素的跨浏览器兼容性，包括使用X-UA-Compatible元标签在IE浏览器中模拟Chrome内核，以及为仅支持旧版本IE的情况提供待圆角图片做背景的解决方案。

用过border-radius的人都应该知道，这个属性的兼容性，如果你不知道，也没关系，看看下面的图就知道了。

实现兼容性非常简单，在meta里加下面这段代码就支持了。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

原理：在用ie浏览时，使用chrome内核，如果没有安装chrome，则使用支持的最高版本的ie内核，所以看起来好像是支持圆角了，其实是假装的……

如果，你的电脑只有ie6,ie7,ie8,还有一种办法，就是使用待圆角图片做背景(这个就不做详细介绍了)。

eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>test圆角</title>
</head>

<body>
<div style="border-radius:10px; width:200px; height:200px; background:#888;">
</div>
</body>
</html>