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

我制作了一个CSS类，它将渐变和圆角应用于一个跨度元素，作为一个按钮。它似乎在我测试过的大多数浏览器中都能工作，但IE9给了我一些问题。由于现在上课，圆角不能正常工作。然而，如果你看得很近，在一个不圆的层下面似乎有圆角（我认为这是解释其外观的最好方式，如果没有意义，请原谅我）

无论如何，通过反复试验，我把这个类搞乱了，直到我发现删除“display:inline block；”属性允许正确显示圆角，但因此渐变不再有效。有什么想法吗

HTML：

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

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

这篇文章的答案建议使用图片，我宁愿避免使用。该线程的另一个建议答案是在按钮周围放置一个带有“overflow:hidden；”的包装器，但这似乎也不太正确

您忘记了webkit边界半径附近的“-”

试试这个：

-webkit-border-radius: 3px;

---

这很有用

在页眉添加以下内容

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

---

这将禁用IE9中的兼容模式。如果这是由于兼容性问题，那么它将得到解决。

而问题是关于IE9的，

-webkit

又有什么意义呢？@Maxime Caboche-啊，谢谢。我现在修复了它，但是它不会影响我的iUse。正如Hashem指出的，这不是问题所在，因为前缀webkit将针对所有webkit浏览器。其中包括：Chrome和Safari以及其他许多不太受欢迎的浏览器：@Hashem Qolami-虽然这个问题是针对IE9的，但我也在尝试为其他浏览器开发。我只是直接从我的源代码复制并粘贴代码，如果造成任何混乱，我深表歉意。@jessikwa没问题。这可能会发生在我们任何人身上。据我所知，我目前正在使用“”这与指定IE=9相同？

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