Question

我有这个HTML

 <a class="command" href="/">My profile</a>

和这个css

padding-bottom:4px;
padding-left:8px;
padding-right:8px;
margin-right:5px;
display:inline-block;
text-decoration:none;
background:linear-gradient(tobottom,rgb(126,197,22) 0 #86c825 9% #8ecc32 16% #8ecc32 47% #88c332 63% #7cae32 84% #76a82c 88% #6da122 91%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7ec516',endColorstr='#6da122',GradientType=0);
text-shadow:1px 1px 2px #555;
border-radius:10px;
height:22px;
text-align:center;
font-size:11.3pt;
color:#fff;

我添加了

<meta http-equiv="X-UA-Compatible" content="IE=edge">

并将doctype更改为

<!DOCTYPE html>

但它对我没有帮助。如何解决这个问题？

Answer 1

IE9支持border-radius。

但是，当您将filter渐变与border-radius结合使用时，IE9中存在一个众所周知的错误。渐变将呈现为没有圆角的框，并将放置在您定义的任何边框半径的顶部。那里有圆角;你只能看到它们。

对于渐变，使用filter无法解决此问题：如果使用filter渐变，则圆角将无法在IE9中使用。

解决方案是使用不同的技术渲染渐变。我可以建议两种选择：

使用SVG数据网址。

这主要涉及为渐变创建SVG图像，将其转换为base-64编码数据URL，然后将其直接粘贴到CSS代码中。这很难看，但确实有效。你会想让它特定于IE9，否则它可能会干扰你在其他浏览器中的渐变。如果你想支持IE8，你仍然需要保留filter，因此还需要特定于浏览器版本，以便IE9不使用它。正如我所说，这是一个丑陋的解决方案。

如果您确实想使用此选项，可以在此处使用生成器：http://ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html
使用像CSS3Pie这样的polyfill脚本。

CSS3Pie是一个小的Javascript库，它为所有IE版本增加了对一些通常不支持的CSS功能的支持。这包括CSS渐变，以及IE8和更早版本的border-radius。它易于使用，并允许您为所有浏览器使用标准CSS代码，甚至是旧的IE。唯一的缺点是它是一个Javascript库，所以如果你的用户已经禁用JS，他就不会看到它。幸运的是，这些日子非常罕见，因此使用起来通常是安全的。这是我推荐的解决方案。

Answer 2

如果删除背景渐变 - IE9不支持：

.command {
    padding-bottom:4px;
padding-left:8px;
padding-right:8px;
margin-right:5px;
display:inline-block;
text-decoration:none;
background-color:green;    
text-shadow:1px 1px 2px #555;
border-radius:10px;
height:22px;
text-align:center;
font-size:11.3pt;
color:#fff;
}

http://jsfiddle.net/7BcTT/2/

为什么border-radius在IE9中不起作用？

2 个答案: