2011.03.11

続、うるぁぁ〜IE 真解明編

うひぃ 先日、IE6は必要悪みたいな事を書いた矢先、タイミング良く?マイクロソフトがIE6撲滅キャンペーン…を打ち出しました。
www.itmedia.co.jp/news/articles/1103/07/news024.html
作った本人が撲滅とか何を言っているんだいw
IE6を考慮に入れなくて良くなれば、大変ありがたいですが。
ところで、以前なやみに悩みまくった
IE8のIE7互換表示でtableに配置した画像に謎の隙間及び、画像がずれる(うるぁぁぁ〜っシリーズ)件。
原因がわかりました。
当時は混乱の極みで記事も大変判りにくいので、整理してみたいと思います。
お急ぎの方下の方のまとめお読み下さい〜。
お急ぎでない方は、このままお読み下さい(;´Д`)ゝ。

まず、こういった現象が起こったわけです。
IE8(IE7互換表示)及びIE7もしかしてIE6も

aaaaの部分は画像。
テーブルのtd内に画像を配置して、リンク<a>を貼り、<a>をdisplay:blockでブロック化したものです。
<a>をブロック化しなければ、画像下部に隙間ができてセルが広がります。
当初IE8の仕業かと思ったのですが、IE7互換表示の仕業でした。なのでIE7のバグになるかとおもわれます。
この現象が起きたのは、cssで全称セレクタのfont-familyにメイリオを指定(注1
画像にvertical-align:bottomを指定した時です。
前回は解決策としてimgをdisplay:blockでブロック化してずれをなくす。
と、書きました。
そうすると好きなだけ、font-familyも画像にvertical-alignも指定できる、とも書きましたが、よくよく考えて見れば、ブロック化したらvertical-alignは無効となります。
おもいっきりvertical-align:bottom;が悪さをしていたという事がわかりました。
しかし、imgに対してvertical-align:bottomを指定するのは、画像を縦に並べる時に隙間が出来てしまうのを回避する為に良く使われる手段ですし、一括指定してる場合も多いかと思われます。
そしてimgをブロック化すると困る場合もあります。ちょっと不便です。
と、そこでなぜメイリオだけ(ヒラギノ無罪)こんな現象が起こるのか改めてググってみたところ、
こんなに有名な事象が。Alternative Design Projectさん
IE6/IE7のunderlineバグとのことですが、これはもしやっ?!
テキストリンクのアンダーラインが文字に掛かって打ち消し線のようになってしまう、a要素とメイリオ(ブラウザのデフォルトフォント)とvertical-alignに関するバグのようです。

>同じ行のimg要素、または包含するブロック要素(pなど)に、baseline以外のvertical-alignを指定する。
(Alternative Design Projectさんより引用)

この辺りになにか感じます。
「うるぁぁぁ〜っ」の場合、text-decoration: underlineや半角英数フォントを優先などのバグ出現要素は満たしていないのですが、どうも同じ臭いがします。

このような指定をしていたので、メイリオ指定を疑っていたのですが、

>CSSのfont-familyでメイリオを直接指定した場合は大丈夫なようだ。
(Alternative Design Projectさんより引用)

と、あり。全称セレクタのfont-familyに(注1:メイリオを指定したことが原因ではなく、あくまでもブラウザのデフォルトフォントのメイリオの問題で、もしかしてもしかすると全称セレクタでのfont-family:’メイリオ’,Meiryo;指定では、この現象を回避できないのかもしれません。

とすると、デフォルトフォントがメイリオのブラウザでも、MS Pゴシックに上書きされるので回避できるわけで、前回の検証でも効果が出たのですが、これはメイリオを使いたいのであればムダですな。
全称セレクタでfont-familyを指定せず、おのおのの要素に指定するのが良いようです。
imgはvertical-align:baseline;で運用することでも避けられるようです。
しかし、テーブルに画像を敷き詰めるにはvertical-align:bottom必須です。tableを使わないのが一番の解決策なのですが大人の事情でまだtableも健在ですし…、table以外でも色んな場面で発生しそうなバグでもあります。
大変詳しく解説して下さった Alternative Design Projectさんに、お礼を申し上げます。ありがたや〜。

■シリーズ全まとめ

【症状】

IE6/7/8におけるtableセルに配置したリンク画像の隙間、リンク画像の表示切れ

【発生条件】

メイリオがデフォルトフォントになっているIE6/IE7/IE8の互換表示で起こる。
IE8モードでは正しく表示される。

  • IE7/IE6使用時 IEのデフォルトフォントをメイリオにしている。
  • 上の条件かつ、 a img{ に対しvertical-align: beseline以外を指定している。
  • IE8使用時 気付かぬうちに互換表示(IE7)になっている。

【回避方】

  • cssで各要素にfont-familyを明示する。全称セレクタ*では回避できないかも。
  • またはimgをdisplay:blockにする。(vertical-align:bottom; を使わない方法)
  • IE8を互換表示させない。(IE7/6に対応しない場合のみ)

IE8で意図せずに互換表示になるケース

マイクロソフトの互換表示リストに使用ドメインがリストアップされている。
ツール→互換表示設定「マイクロソフトからの更新されたWebサイト一覧を含める」をチェックオフ

デフォルトでは「マイクロソフトからの〜」チェックオンで、強制的にIE7互換表示となっている。
しかし、不特定多数の閲覧側にこれを強いるのは無理。
<meta http-equiv=”X-UA-Compatible” content=”IE=8″>で対応。

DTDが書かれていないか、HTML3.0以下の文書型である。
または、HTML4.01Transitionalのシステム識別子(url)を省略している。

→IE6、IE7のQuirksモード(IE5相当)で表示されてしまうので回避する。

HTML4.01Transitionalで作成の場合、識別子は省略せず
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>とする
なお、HTML4.01Strictは識別子なしでもIE8Standardsモード。
XHTML1.0 Transitional/Strict ではXML宣言ありなし共に、IE8モード(Almost Standards/Standards)で表示。
XHTML1.1 ではXML宣言ありなし共に、IE8Standardsモード。
Nagomi’s memoさん参考になりました。凄く判りやすい!

プレビューなどローカルでHTMLを表示している。
ツール→互換表示設定「互換表示でイントラネット サイトを表示する」をチェックオフ

ここからは推察というか、蛇足。
色々と調べている内にメイリオのディセンダ(baselineより下のスペース)で問題が発生しているケースに出くわしました。
メイリオは特に広いディセンダを持っているようです。
「うるぁぁぁ〜っ」のケースでa要素をブロック化しない場合、
a要素はinline要素なのでディセンダ分の高さを確保していると思われます。line-height:0;を指定しても隙間が消えないのは、メイリオ自体に変更できないディセンダがあるので仕方ありません。
内容にあわせてセルの高さが、ディセンタ分下方向に広がるのは当然な気もします。
imgのbottomよりも、メイリオのbottomの方が遙か下にあり、隙間が生じる。
もしかしてfont-size:0;で回避できたのかもしれませんが、それも試したけどムダだったような気もします。同じ環境が無いのでテストできないのがもどかしいです。
ただ、文字が無いa要素にも文字の高さが反映されるのかどうかが、謎ですが。
そして、a要素をブロック化した時に、なぜ画像の下が切れて表示されないのかも謎のままですが(#・ж・)プン
一応、解決らしきものを見たので、ご報告まで。

「うるぁぁぁ〜」シリーズ過去の記事。興味がございましたらどうぞ。
IE8のバグではなく、IE8の互換表示でバグります。
うるぁぁぁ〜っIE8っ!vol.4 解明編
対策してみた。
うるぁぁぁ〜っIE8っ!vol.3 検証結果なんぞこれ
うるぁぁぁ〜っIE8っ!vol.2 検証してみた
うるぁぁぁ〜っIE8っ!

“続、うるぁぁ〜IE 真解明編”へ 4 件のコメント

  1. とおりすがり より:

    はじめまして、通りすがりです。
    似たような境遇(th,td内だけなぜかMSゴシックになってしまう。。。)でいま足止めくらってましたが、解決しそうです!参考になりました!ありがとうございますヽ(´▽`)/

  2. Oじろー(管理人) より:

    こんにちは。
    IEには色んな不思議がありますよね。
    font-familyが反映されない場合には
    CSSの文字コードによる不具合もあるようです。
    この記事の件、もしかして、これにも引っかかっていたかなぁ。
    と気になってます(;´д`)。
    解決を祈っております!

  3. hatena より:

    tr {line-height:0;}
    で消えたのですが、だめでしょうか?

    • Oじろー より:

      hatenaさん、こんにちは
      trのline-heightを0ですか!
      盲点だったかもしれません。
      たしかtabeleではline-heightは継承されないと思っていたのですが、
      もしかしたら全称セレクタなどで指定したline-heightが継承されていた?のかもしれません。
      メイリオのディセンタが特殊なため症状が顕著に出た可能性?も。
      只今、IE環境が手元に無いので、すぱーんと画像切れを直すことが出来ないのですが、fontを指定する場合には断然便利なのでやってみますね。
      検証と有益な情報ありがとうございました!

      IE7以前のtableレイアウトでお悩みの方はぜひ、hatenaさんの方法もお試しください!

コメントをどうぞ



PageTop