CSS3 边框半径和 IE9
我有用 ColorZilla 生成的 CSS3 渐变。我很确定导致问题的是 DATA URI。这是我的小提琴：http://jsfiddle.net/cY7Lp/。
在 WebKit 中Firefox，角是圆角的，因为它们应该是圆角的，但是在 IE9 中，角是圆角的，并且渐变在它们外面出血，我不希望渐变在角外面出血。有谁知道为什么会发生？
---编辑---
我忘了提及，内联元素不会发生这种情况，只有块元素才会发生这种情况。
I have CSS3 gradient that I've generated with ColorZilla. I'm pretty sure what's causing the problem is the DATA URI. Here's my fiddle: http://jsfiddle.net/cY7Lp/.
In WebKit & Firefox, the corners are rounded as they should be, but in IE9, the corners are rounded and the gradient bleeds outside them, I don't want the gradient to bleed outside the corners. Does anybody know why it happens?
---Edit---
I forgot to mention, this does not happen with inline elements, only block elements.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
它与您的 SVG 图像或其数据 URI 无关，但与您的
过滤器有关。由您使用的filter属性生成的效果不会被border-radius剪切，并且通常会与某些其他内容（例如背景图像）重叠。我不知道这是一个真正的错误还是一个意外的副作用，但这就是 IE9 中的原因，因为它不实现 CSS3 渐变 - 只有 IE10 实现。
由于您无论如何都在使用 SVG 图像，因此您可以轻松地回退到该图像，而不是使用
filter。It has nothing to do with your SVG image or its data URI, but it has to do with your
filter. Effects generated by thefilterproperty, which you're using, do not get clipped byborder-radius, and often overlap certain other things such as background images.Whether this is a real bug or an unintended side effect, I don't know, but that's the cause in IE9, as it doesn't implement CSS3 gradients — only IE10 does.
Since you're using an SVG image anyway, you can easily fall back to that instead of using
filter.边界半径问题似乎在这里讨论：
Support for "border-radius" in IE
...所以，您的浏览器可能正在以旧模式呈现。
Border radius issue seems to be discussed here:
Support for "border-radius" in IE
... so, likely it is that your browser is rendering in legacy mode.