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

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

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

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


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


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

Railsのerb版:
<!--[if IE]><%= stylesheet_link_tag "ie8.css" %><![endif]-->

3.ie8.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;
}
(引用:CSS3「gradient(グラデーション)」のIE対応方法
こんな感じで書くと。

機械忍者

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