NO IMAGE

IE9でも角丸のグラデーションを実現

  • 2012年6月18日
  • 2013年11月7日
  • 覚え書き
  • 20view
  • 0件

20120618a1IE9では、CSSだけで背景画像にグラデーションの記述を指定した綺麗なボタンが表示できませんでした。

しかし、同じような問題は誰かが解決策を見い出している事が多いので、Webで検索。

以下のブログに解決策がありました。ありがとうございます。^^

参考にさせていただいたブログはこちら。

(・・・知らぬ間に、リンク切れになってしまいました。)

こちらも御参照下さい。

20120618a2IE9で背景画像にグラデーションを設定するには背景画像に画像ファイル(SVGファイル)を指定して対応するとのこと。・・・時代に逆行してるような・・・

画像記述用のファイルですが、実際のSVGファイルの中身は、テキストなので、今回のようなグラデーションを実現するだけなら、記述も数行で済み、サイズも小さいので、軽快に表示され問題ないようです。

SVGについてはこちらも御参照。

参考にさせていただいたブログ上のボタンを押して、SVGファイルの記述をコピー&ペーストしたところ、ウエブ表示上の問題からか、「”」(半角)であるべきところが、「”」(全角)になっていました。

取り込んだ後に、全角→半角に置き換える必要があります。

・・・これに気づくのが遅れて、しばし、悩みました。^^

これで、なんとかIE9でボタンがまともに見られるようになりました。

PS:
IE8以前ではどんな風に表示されるのだろうか・・・。ちょっと気になってきました。
完璧をめざすのもほどほどに・・・その内余力ができたら確認環境を用意しましょう。