galilajiao00 2014-12-08
用过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>