LoginSignup
6

More than 5 years have passed since last update.

IE7、8 で filter や opacity を使うとメイリオがジャギる件

Last updated at Posted at 2014-12-22

教えていただいたのでメモ。

[前提条件]

  • 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)";
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6