css - 弄乱了 IE9 中的圆 Angular 渲染

Question

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

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

据我所知，我已经正确设置了所有内容，当然它在 firefox 和 webkit 浏览器中都呈现得很好。

有人见过吗？我正在追着我的尾部，谷歌搜索结果是蹲下。

输入框:

具有渐变背景的DIV:

编辑:

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

Answer 1

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

• 使用包含渐变的背景图像而不是 IE < 10 的渐变
• 为 IE < 10 使用普通背景色而不是渐变色

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

In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.

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