CSS3 gradient(グラデーション)のIE対応

ボタンの中にテキストを埋め込みたいからCSS3を使ったボタンを作ることに。
グラデーションなどを使って綺麗にしたかったんだけど例のごとくIEという壁が。

CSS3「gradient(グラデーション)」のIE対応方法
にがっちり書かれているんだけれど一応メモ。


1.ie8.cssという特別なファイルを作る

2.継承で上書きしきるためにCSSの呼び出しの羅列に以下を追加

HTML版
[code language=”html”]
<!–[if IE]><link href="/stylesheets/ie8.css" media="screen" rel="stylesheet" type="text/css" /><![endif]–>
[/code]

Railsのerb版:
[code language=”html”]
<!–[if IE]><%= stylesheet_link_tag "ie8.css" %><![endif]–>
[/code]

3.ie8.css内にコピペ

[code language=”css”]
.hogehoge {
/*IE6 IE7 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff, endcolorstr=#eeeeee));
/* IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff, endcolorstr=#eeeeee))";
zoom: 1;
}
[/code]
(引用:CSS3「gradient(グラデーション)」のIE対応方法

こんな感じで書くと。

機械忍者

某SEO会社(?)勤務。 多分日本語よりHTMLの方が得意です。 最近はRubyとかいうキラキラな言語も勉強中です。 SEOはもう標準スキルになってきてると思うので正直もうあんまり昔ほどの熱意は感じません。 新たに躍動してる人も多いですしね。 だれか強化骨格コスプレあったら教えてください。

あわせて読みたい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください