パンダのメモ帳

技術系のネタをゆるゆると

IEでopacityを変更した場合に、ClearTypeが無効になる

テキストが含まれる要素の透明度(opacity)を操作した場合に、IEだとClearTypeが解除されてしまう。IEのCSS独自実装であるfilter プロパティと ClearType のエフェクトが干渉しているのが原因らしいが、そんなことはどうでもいい。というわけで対策……といきたいが、現在の所これといった解決策がない。

限定的に、FadeInさせた場合や透過処理をやめた後にのみ使えるテクニックを見つけたので転載。

element.style.removeAttribute('filter');
element.style.visibility = 'hidden';
element.style.visibility = 'visible';

jQueryの場合はこんなカンジでいけた。

elem
  .each(function(){ this.style.removeAttribute('filter'); })
  .css('visibility', 'hidden')
  .css('visibility', 'visible')
;

IE6〜IE7 の場合、removeAttribute だけでいいみたい。後半の visibility の操作は IE8対応用。必要に応じて処理を分けたり、削ったりすればいいんじゃないかな。