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対応方法)
こんな感じで書くと。