当前位置: 动力学知识库 > 问答 > 编程问答 >

css - CSS3 Border-Radius and 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.

网友答案:

It has nothing to do with your SVG image or its data URI, but it has to do with your filter. Effects generated by the filter property, which you're using, do not get clipped by border-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.

网友答案:

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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: