スクロールのあるブロックを含む HTML ページで、IE9（Internet Exploler 9）のみで、スクロールするとなぜか文字の表示が乱れる事がある。前後の要素構成によって、当該箇所のコードは変更しなくても問題が発生しない事もあるのでどういう時に発生するのかは分からないのだが、共通する原因は ClearType （Windows OS に含まれる文字を見やすくする調整機能！）のバグらしい。IE9 にはこれを個別にオフにする機能がない。この問題の解消方法。
問題の例：スクロールした時にIE9で文字が乱れる
IE9 で ClearType を無効にする（事ができる）JavaScript
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
if($.browser.msie && parseInt($.browser.version) == 9){ // jquery 1.8 or lower!!!
$(‘#target’).css(‘opacity’, ‘0.99’);
}
});
</script>
<script type=”text/javascript”>
$(document).ready(function(){
if($.browser.msie && parseInt($.browser.version) == 9){ // jquery 1.8 or lower!!!
$(‘#target’).css(‘opacity’, ‘0.99’);
}
});
</script>
CSSで opacity を変更すると ClearType が無効になってくれる（おそらく）バグを利用して、問題を回避します。
この情報は、下記で見つけました。Thanks!
パンダのメモ帳 – IEでopacityを変更した場合に、ClearTypeが無効になる