CSS3 Border-RadiusとIE9

私はColorZillaで生成したCSS3グラデーションを持っています。私は、問題を引き起こしているのはDATA URIだとはっきりと確信しています。私のバイブルはhttp://jsfiddle.net/cY7Lp/です。CSS3 Border-RadiusとIE9

WebKit & Firefoxでは、コーナーは丸みを帯びていますが、IE9ではコーナーが丸みを帯びており、グラデーションがそれらの外側に出るので、コーナーの外にグラデーションが出ないようにします。誰がなぜそれが起こるか知っていますか？

---編集---

私は、これは、インライン要素のみブロック要素では発生しませんが、言及するのを忘れてしまいました。

2012-01-08 henryaaron

SVGイメージやそのデータURIとは関係ありませんが、filterと関係があります。使用しているfilterプロパティによって生成されたエフェクトは、border-radiusでクリップされず、背景イメージなどの特定のものと重複することがよくあります。

これは本当のバグか意図しない副作用かどうかはわかりませんが、それはCSS3グラデーションを実装していないIE9の原因です。IE10だけです。

とにかくSVG画像を使用しているので、filterの代わりに簡単にその画像に戻すことができます。

2012-01-08 18:31:32 BoltClock

データURIバックアップは半径で動作しますが、IE6-8はDATA URIで動作しません。もし私がそれらを再注文すれば？ – henryaaron

@ user1090389：並べ替えが機能しません。フィルタは常にあなたのSVG背景画像上に描画されます。 – BoltClock

-ms-linear-gradientに描画されますか？ – henryaaron

ボーダー半径の問題は、ここで説明しているようだ：

...そう、そう、それはあなたのブラウザはレガシーモードでレンダリングされていることです。

2012-01-08 18:27:43

jsFiddleが標準モードをトリガーします。 – BoltClock

違いはありません... – henryaaron

答えて