対応した IE バグを書き留めておく

HTML5 に移行しようと思い、WordPress のスターターテーマである Toolbox をカスタマイズした。IE の事も意識しながら、不具合が出ないように考え自分なりに頑張ってみたのだが・・・。実現したい事を優先すると、どうしても IE でおかしな事が起こってしまう。古い IE への対応は少し諦めていく方向だけど、最低限の見た目は確保したい。そこで今回、私が遭遇した不具合を書き留めておこうと思います。

まず、私が確認した環境は、 Win Vista64bit の環境で IE8, IE7 (IETester), IE6 (IETester) と、Win XP 32bit の環境で、IE6, IE7 (IETester), IE8 (IETester) です。

リンクなどの背景に画像を使用すると、IE6 で画像がちらつく

これはよく見かける光景ですね。 IE6 にだけ背景を指定しないのもありですが、簡単に対応出来る事がわかりました。教えてくれたのは以下の記事です。

hover時の背景画像ちらつきに対処する – Archiva

CSS で解決する方法と、JavaScript で解決する方法が書かれている。私の場合、CSS で対応できるものは JavaScript を使いたくないので CSS の方法を選択した。ただし、以下のような注意が書かれていました。

ただし！ expression()は重いです。動的プロパティなので半端ない回数で実行してます。この程度なら気にするほどの負荷ではありませんが、気になる人は素直にJavaScriptを使いましょう。どうせ中身は同じです。

不具合が起こっている場所は分かっているので、私の場合は個別に指定してあげることで実行回数を減らすようにしてみました。 #hoge 部分はご自身の環境に合わせてください。

* html #hoge {
    filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

その後、不具合部分をキャプろうと思って確認していみたのですが、何故だか不具合がおさまっていました。その後に施した対策の何かが解消させたと思われますが、その何かは現在不明です。めちゃくちゃ知りたい・・・

IE6, IE7 でリンク後方にアイコンを使用した場合、正確に折り返してくれない

これも非常に見難い状況になってしまいます。同じ見た目にする対策は見つからなかったのですが、代用する事で対応しました。

通常表示例

IE6, IE7 での表示例

この状態では、アイコンがある意味が分かりません。ですので、どんな状況でも良いので、後ろの方に表示出来るようにしたいです。と言う事で、IE6, IE7 にだけ以下の CSS を追加しました。 id, class などはご自身の環境に合わせて下さい。

* html #hoge a.hoge-icon {
    display:inline-block;
}
*+html #hoge a.hoge-icon {
    display:inline-block;
}

そうすると以下のような長い文の場合に、二列にまたがってではありますが、後方に表示する事ができました。この場合、背景画像要素には center を指定した方が良さそうです。

応急処置での表示例

これでもまだ変ですが＾＾；
よしとしましょう。

追記

right　center ではなく、 right だけ指定すれば、短い文だとちゃんと後ろに表示できることが分かりました。長いのはそれでも中間になりますが・・・

IE6, IE7 で float 要素に関係するバグがある

なんだか色々とおこりますねぇ。余白ができちゃったり、指定した位置にならなかったり・・・。たくさんあり過ぎて遭遇したくありません。当サイトでもタブ化している部分で、表示がおかしくなっていました。

通常は下にボーダーがある

IE6, IE7 では重なる

色々と入れ子にしているなぁと思ったら、躊躇せずに width を指定するようにしています。
この場合は、下の要素に以下をしていしています。 id, class などはご自身の環境に合わせて下さい。

* html #hoge ul {
    width:100%;
}
*+html #hoge ul {
    width:100%;
}

この width を指定する事は色々な不具合を解消することが多いので、おかしな事が起こってしまったら加えてみると解消する事が多いと思います。それ以前に、何時もは省略してしまう所に width を指定しておくと IE で幸せになれるかもしれません。古い IE での表示テストほど嫌になる作業はありませんから・・・。

背景関係がおかしい事が多い

以下のような場合、考えるのも面倒なので魔法の言葉 zoom:1 を唱える。背景がおかしかったり、margin を認識しなかったりする事が多いです。

( ﾟДﾟ)ﾊｧ?

* html #hoge {
    zoom:1;
}

IE8 で png 画像の hover に opacity を指定すると汚くなる

png 8bit では起こらなかったので、それで対処もできます。でもよりきれいな画像を使いたいです。

opacity を指定すると汚くなる

さっきの困ったら width と似たような事で、困ったら background-color があります。画像がスクロールで消えるとか、それ系でも活躍するものでここでも躊躇せずに省略していた background-color を入れるとなおりました。

その他、細々とした事

IE6, IE7 用に pre に以下を追加しました。これは折り返ししてくれず、サイドバーを破壊するのを防ぐ為です。スクロールバーが表示されるので、はみ出すことはなくなります。 width はご自身の環境に合わせて下さい。

* html pre {
    overflow:auto;
    width:97.5%;
}
*+html pre {
    overflow:auto;
    width:97.5%;
}

それと、使用している google-code-prettify との相性が悪い IE6 用に以下を追加しました。これで強制的に折り返します。

* html pre {
    white-space:pre-wrap;
    word-wrap:break-word;
}

追記

現在は IE6 以下で google-code-prettify を使用しないようにしました。

$(function(){
   if($.browser.msie && $.browser.version <= 6 ){
   }else{
      $('#content pre').addClass('prettyprint');
      prettyPrint();
   }
});

最後に

細々としたものは、まだあるのですが、さっきも言った様に width, background-color を指定する事で解消しています。 以前は不具合があったのに何時の間にかなおっている事があるのは、この辺が作用しているのかもしれません。でもその反対で、何かを追加すると何時の間にかにおかしくなっている事も多いので、悩みが解消される日はまだまだ先かもしれません。

zoom:1 と言う、魔法の言葉もかかせません。

最後にひとこと

最低限対応したから、後は無視する方向で＾＾
Time is money