IE9対策 border radiusとgradient編

まだie9は対応必要ですよね・・。

ie9 border radius gradient problem とか検索するとすぐに出てくるかと思いますが、
IE9では角丸とグラデーションを一緒に指定すると角丸が効かなくなってしまいます。

そんなときはー、SVGを使うべし。

個々を使えばすぐにグラデーションを生成してくれます。
さらに、IE9を使うならば、SVGを使うようにしてくれます。

↑ここで選択できます。

IE9でradiusとgradientのfilterが相性よくないので、

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

↑こちらをHTMLに入れておくと、IE9ではfilterを消してくれます。
そもそもIE6からIE8まで対応が必要なければ、filter消しちゃっていいですね。