IE 过滤器语句破坏了 IE9 背景裁剪

Question

我相信所有浏览器默认使用background-clip: border-box;。这似乎是默认行为。

当使用：http://www.colorzilla.com/gradient-editor/ 时，它将过滤器指定为最终属性。使用IE9时，背景会溢出边框，并且border-clip属性失效。

这里有一个小提琴来说明：http://jsfiddle.net/tPDMb/3/

我现在只是删除了 filter 语句，但这会导致 ie9 和更低版本根本没有背景渐变。

还有其他人遇到过这个问题吗？

Answer 1

您说的正确，默认行为是剪切到边框，background-clip 的初始值确实是border-box。

问题在于 IE 过滤器不是真正的 CSS 背景层。因此，IE 渐变过滤器将忽略所有背景和边框定位/剪切属性，例如background-clip、background-position 和border-radius。不幸的是，这是设计使然。在尊重这些属性的同时，让渐变背景在 IE9 及更低版本中工作的唯一方法是使用预渲染的渐变图像。如果您需要支持较旧的 IE，只需将 ColorZilla 提供的 SVG 部分替换为 PNG 图像或类似图像即可。