0

我有这个 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 html>

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

4

2 回答 2

2

IE9 确实支持border-radius.

但是，当您将filter渐变与border-radius. 渐变将呈现为没有圆角的框，并将放置在您定义的任何边界半径的顶部。圆角在那里；你只能看到它们。

使用渐变无法解决这个filter问题：如果使用filter渐变，那么圆角在 IE9 中将不起作用。

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

  • 使用 SVG 数据 URL。

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

    如果您确实想使用此选项，您可以在此处使用一个生成器：http: //ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html

  • 使用像CSS3Pie这样的 polyfill 脚本。

    CSS3Pie 是一个小的 Javascript 库，它在所有 IE 版本中添加了对通常不支持的一堆 CSS 功能的支持。这包括 CSS 渐变，以及 IE8 和更早版本的边框半径。它易于使用，并允许您为所有浏览器使用标准 CSS 代码，甚至是较旧的 IE。唯一的缺点是它是一个 Javascript 库，因此如果您的用户禁用了 JS，他将看不到它。幸运的是，如今这种情况非常罕见，因此通常可以安全使用。这是我推荐的解决方案。

于 2013-11-06T16:00:28.363 回答
1

如果您删除背景渐变，它会起作用 - 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/

于 2013-11-06T15:44:13.817 回答