`

如何让IE7,IE8支持border-radius

    博客分类:
  • CSS
阅读更多

用过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>

 

 

  • 大小: 19.2 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics