Question

我制作了一个CSS类，它将渐变和圆角应用于span元素以充当按钮。它似乎适用于我测试过的大多数浏览器，但IE9给了我一些问题。由于该类现在圆角不能正常工作。然而，如果你看起来非常接近，似乎在一个没有圆形的层下面有圆角（我认为这是解释它看起来的最佳方式，请原谅我，如果这没有意义）

无论如何，通过反复试验，我搞砸了班级，直到我发现删除'display：inline-block;'属性允许正确显示圆角，但结果渐变不再有效。有什么想法吗？

http://jsfiddle.net/jessikwa/wcgzkkgr/

HTML：

<span class="action_button">Button</span>

CSS：

.action_button
{
color: #FFFFFF;
font-size: 12px;
font-family: arial;
cursor: pointer;
text-decoration: none;
padding: 3px 5px;
display: inline-block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid #f7a03b;
webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #8b8b8b 0px 1px 4px;
-moz-box-shadow: #8b8b8b 0px 1px 4px;
box-shadow: #8b8b8b 0px 1px 4px;
background-color: #efbb7f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#efbb7f), to(#f88600));
background-image: -webkit-linear-gradient(top, #efbb7f, #f88600);
background-image: -moz-linear-gradient(top, #efbb7f, #f88600);
background-image: -ms-linear-gradient(top, #efbb7f, #f88600);
background-image: -o-linear-gradient(top, #efbb7f, #f88600);
background-image: linear-gradient(to bottom, #efbb7f, #f88600);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#efbb7f, endColorstr=#f88600);
}

更新：进一步阅读StackOverflow中的其他帖子让我更接近，但仍然不太正确。

IE9 border-radius and background gradient bleeding

这篇帖子使用图片的答案建议，我宁愿避免。线程的另一个提议答案是在按钮周围放置一个“overflow：hidden;”，但这似乎也不是正确的。

http://jsfiddle.net/uu19uqg4/

Answer 1

你忘记了＆＃34; - ＆＃34;靠近webkit-border-radius

试试这个：

-webkit-border-radius: 3px;

此link可能很有用

Answer 2

在页面的开头添加以下内容。

<meta http-equiv="X-UA-Compatible" content="IE=7,IE=8,IE=9" />

这将禁用IE9中的兼容模式。如果由于兼容性问题，它将被解决。

IE9显示渐变和圆角CSS的问题

2 个答案: