IE9中圆角的渲染搞砸了答案

【问题标题】：Messed up rendering of rounded corners in IE9IE9中圆角的渲染搞砸了
【发布时间】：2012-02-02 14:04:13
【问题描述】：

我在 Windows 7 的 IE9 中寻找一些非常奇怪的渲染问题。我在任何有渐变的地方使用微软的“过滤器”方法，它是 HTML5，并且一切都处于标准模式。

请注意，因为有一些混淆：这种情况在任何有圆角的地方都会发生，包括在没有渐变甚至根本没有背景颜色的情况下。具体问题可以在下面的屏幕截图中看到，因为边框和颜色在 x 轴上重复出现，在元素内部。

据我所知，我已经正确设置了所有内容，当然这一切在 Firefox 和 webkit 浏览器中都可以正常显示。

有人见过吗？我追着我的尾巴和谷歌搜索出现了蹲下。

编辑：

下面提供的 twitter-bootstrap 链接在所有示例元素上展示了完全相同的问题。比我更聪明的人正在从事该项目，所以我认为仅靠 CSS 是无法解决的。随意关闭。

【问题讨论】：

IE9 Border-radius and Background Gradient Bleeding 的可能副本。 This answer 似乎有最好的解决方案，如果你不介意有一个额外的包含元素来执行剪辑。
这不是重复的......我在这里发布的问题发生在任何有圆角、渐变背景的地方。见上图输入框截图。
你的问题只提到了渐变，但是，我在 duplicate 中指出的解决方案也应该可以解决这个问题。
我很欣赏到另一个线程的链接，我相信这将有助于解决上面“带有渐变背景的 DIV”图像中的一个问题。但是，如果您查看上面的帖子，您会发现其他线程与显示的主要问题无关。 bleed 不是我想要解决的问题。
正确，但我仍然认为它也可以解决第一个问题，因为您会将边框半径应用于祖先元素而不是输入元素。

【解决方案1】：

这是 IE9 中的一个已知错误，没有真正简单的解决方案* 可以摆脱它。最简单的方法是：

twitter bootstarp，例如也必须处理这个问题。他们选择为按钮使用纯背景色，就像你 can read here:

在 IE9 中，我们放弃了所有按钮上的渐变以支持圆角角落，因为 IE9 不会将背景渐变裁剪到角落。

【讨论】：

【解决方案2】：

IE 过滤器和圆角不能很好地配合使用。您将不得不在 IE 的纯色背景颜色或方角之间进行选择。供应商前缀渐变将是supported in IE10，所以至少有。

Twitter 在Bootstrap site 上记录了这一点，并表示：

“在 IE9 中，我们放弃了所有按钮上的渐变以支持圆角，因为 IE9 不会将背景渐变裁剪到角落。”

【讨论】：