CSS3 Border-Radius и IE9

Question

У меня есть CSS3 градиент, который я создал с помощью ColorZilla. Я почти уверен, что причиной проблемы является URI DATA. Вот моя скрипка: http://jsfiddle.net/cY7Lp/.

В WebKit & Firefox углы закруглены, как и должно быть, но в IE9 углы закруглены, и градиент кровоточит за их пределами, я не хочу, чтобы градиент кровоточил за пределами углов. Кто-нибудь знает, почему это происходит?

--- Редактировать ---

Я забыл упомянуть, это не происходит со встроенными элементами, только с блочными элементами.

Answer 1

Он не имеет ничего общего с вашим SVG-изображением или его URI данных, но он имеет отношение к вашему filter.Эффекты, генерируемые используемым вами свойством filter, не обрезаются на border-radius и часто перекрывают некоторые другие вещи, такие как фоновые изображения.

Является ли это реальной ошибкой или непреднамереннымпобочный эффект, я не знаю, но причина в IE9, поскольку он не реализует CSS3-градиенты - только IE10.

Поскольку вы все равно используете изображение SVG, вы можете легко отступитьк этому вместо использования filter.

Answer 2

Проблема радиуса границы, кажется, обсуждается здесь:

Поддержка "border-radius" в IE

... так что, вероятно, ваш браузер выполняет рендеринг в устаревшем режиме.