在IE9中弄乱了圆角的渲染

Question

我正在Windows 7中的IE9中搜索一些非常奇怪的渲染问题。我使用的是微软“过滤器”方法，只要有渐变，它就是HTML5，一切都处于标准模式。

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

据我所知，我已经正确设置了一切，当然这一切在firefox和webkit浏览器中都很好。

有没有人见过这个？我正在追逐我的尾巴，谷歌用谷歌蹲下来。

输入框：

具有渐变背景的DIV：

编辑：

下面提供的twitter-bootstrap链接在其所有示例元素上展示了完全相同的问题。比我更聪明的人正在研究这个项目，所以我把它作为单独使用CSS无法解决的问题。随意关闭。

Answer 1

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

• 使用包含渐变而不是渐变的背景图像用于IE＆lt; 10
• 使用简单的背景颜色代替IE的渐变＆lt; 10

例如，

twitter bootstarp也必须处理这个问题。他们选择使用普通的背景颜色作为按钮can read here：

  

在IE9中，我们将渐变放在所有按钮上，而不是舍入   IE9的角落不会将角落的背景渐变裁剪掉。

* 丑陋 svg-for-ie-solution：http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

Answer 2

IE滤镜和圆角不能很好地融合在一起。您将不得不在IE的实心背景颜色或方角之间进行选择。供应商前缀渐变将为supported in IE10，因此至少存在这种情况。

Twitter在Bootstrap site上记下了这一点，并说：

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