教えていただいたのでメモ。
[前提条件]
- CSS3 グラデーション(filter)を使用
- hoverで透明度(opacity)を変更
- font に「メイリオ」を指定
- filter や opacity を使うと文字がジャギる(=IE7、8のバグ)
.ttl {
border-top: solid 1px #7db7e6;
border-bottom: solid 1px #7db7e6;
background: #fdfeff;/* IE6 IE7 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#fdfeff, endcolorstr=#ecf5fc));/* IE8 IE9 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#fdfeff, endcolorstr=#ecf5fc))";
zoom: 1; background: -moz-linear-gradient(top, #fdfeff, #ecf5fc);/* FF3.6+ */
background: -webkit-linear-gradient(top, #fdfeff, #ecf5fc);/* Chrome10+, Safari5.1+ */
background: linear-gradient(to bottom, #fdfeff, #ecf5fc);/* IE10+, W3C */
}
.ttl a:hover {
display: block;
background: #dcf0ff;
text-decoration: none;
}
[修正後]
- CSS3グラデーション → 背景画像
- hover時に追加「
-ms-filter: "";
」
.ttl {
border-top: solid 1px #7db7e6;
border-bottom: solid 1px #7db7e6;
background: #fefeff;
background: url(/img/ttl_bg.jpg) center bottom repeat-x;
}
.ttl a:hover {
display: block;
background: #dcf0ff;
text-decoration: none;
-ms-filter: "";
}
※ちなみに、これではダメでした。
.ttl a:hover {
display: block;
background: #dcf0ff;
text-decoration: none;
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "alpha(opacity=100)";
}