IE9でtwitter bootstrapのgradientが変な色になる
ただいま、開発の真っ最中。
例のごとく画面系はTwitter Bootstrapにお世話になっています。
さて、そのTwitter Bootstrapでのバグ？というか、はまったのでメモしておきます。
bootstrapではnavbarというクラスがあり、縦にも並べられるので、メニュー等に利用できます。
このクラスを利用して、メニューの色を独自に変えようとしたところ、マウスオーバーしたときの色が指定したのと違う。しかもIE9だけ。。。
書いていたCSSはこんな感じ。
.nav-list > li > a:hover {
zoom: 1;
color: #333;
background-color: #ddd;
background-image: -moz-linear-gradient(top, #eee, #ddd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#ddd));
background-image: -webkit-linear-gradient(top, #eee, #ddd);
background-image: -o-linear-gradient(top, #eee, #ddd);
background-image: linear-gradient(to bottom, #eee, #ddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ddd', GradientType=0);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#eee, endcolorstr=#ddd))";
}
全く持ってIE9だけ発生する理由が分からないので、まずは!importantを付与。
それでもだめ…orz
理由がわからんので、さっそくgoogle先生経由でstack over flowでそれらしき記事を発見。
結論から言うと、#dddではなくて#ddddddと書かないとこうなるということでした。
それで下記のように修正したらなおりました。
.nav-list > li > a:hover {
zoom: 1;
color: #333333;
background-color: #ddd;
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#eeeeee, endcolorstr=#dddddd))";
}
うーん、やっぱりIE早く死んでほしい。
