Home
「こんにちは。miyoshiです。
今さらですがIE6ってバグ多いですよね？
最近はIE7が出回って久しくもあり、またfirefoxその他ブラウザを愛用の方も多数いらっしゃることと思います。
ですが、IE7がwindows2000には対応していないかったり、社内のブラウザは統一したいという思惑があったりで、企業ではまだまだIE6が人気のようです。
私の知っているお客様企業でもIE6が社内で推奨（強制）されていて、開発時にはIE6に合わせたcssを書いたりしています。
今日はそのようなIE6のバグの中から一つの対策tipsを紹介します。
ロールオーバーで背景画像を切り替えるようなcssを書いたボタンがあります。
ローカル環境でコーディング中は問題ないのに、サーバにあげてみると画像がちらついたり、ひどい場合だとマウスを近づけるたびに砂時計が出てすごく気になります。
これはオンマウス状態の度に画像をダウンロードし直しているせいです。
しかしMETAタグのキャッシュの制御の有無とは無関係なようです。
ローカルでテストした時は大丈夫だったのに…？
というわけで調査した結果、IE6のバグであるという情報を得たので備忘録がてら対処法をお知らせします。
●javascriptに以下を記述
document.execCommand(”BackgroundImageCache”, false, true);
} catch(e) {}
これで解決です！
「cssのバグなんだったらcssで対策したい！」 というわけで、この件に関して調べると
▲cssに以下を記述
filter: expression(document.execCommand(”BackgroundImageCache”, false, true));
}
のような対処法がわりと出てきますが、この「expressionをcssに記述する（==cssでjavascriptを実行してしまう）」方法は推奨されません。
画面にちょっとでも動きがあると（マウスを少しずらしただけでも）expressionを再評価しにいってしまい大変に効率が悪いとのことです。
私も試してみましたが、メニューボタンをマウスでちょっとなぞっただけで何百回単位でscriptを実行していました。
見た目には問題ないので気がつきにくい落とし穴です。ご注意を！
見過ごせるといえば見過ごせるような地味なバグで、規模の大きいサイトでも対策がないところも多いです。
が、特にIE6には対応させてほしい！といった要望があるようなプロジェクトの場合はぜひ取り入れたい処理だなあと思いました。
- Newer: WEBサービスの企画・運営で学んだ事
- Older: ブックマークレットで自分だけのツール
