2009.10.23

うるぁぁぁ〜っIE8っ!vol.3 検証結果なんぞこれ

(23年 3月11日 加筆修正)
原因が解明しました〜 ふう、何年越しだw IE7/IE6/IE8互換表示のバグです。
「うるぁぁ〜IE 真解明編」をご覧下さい。

「IE8の互換表示」がなせる技でした。IE8スタンダードレンダリングでは正常に表示されます。
加筆修正部分はこのスタイルが適用されてます。

前々回IE8に文句を付け、前回訂正してお詫び申し上げたんですが。
なかなか自分の環境では状況を再現できませんで、今回、やっと発生条件がわかりましたのでご報告いたす所存。
くどいですがもう一度、これまでの状況説明。

  • 画像のアイコン群をテーブルで並べてリンクを張った
  • どうしても無くならない隙間が画像の下にできる(リンクを張らなければ問題ない)
  • 画像含むa要素を display :block; にすると画像の上に謎のスペースが発生し、見切れる
  • 何故か、vertical-align:bottom;の指定を抜くと解消

まずはこちら、IE8お持ちでしたらご覧下さい。
戻ってくるリンク貼ってませんので、ブラウザでお戻り下さい。

IE8ではfont-familyの問題はありません。
問題は、niftyドメインがIE8の互換表示でIE7スタンダードでレンダリングされる現象でした。

全然問題ないよ!という場合はすみません。再現した環境は
windows XP/IE8
だす。(vistaでも不具合を確認できました。)
キャプチャを貼っときますです。
制作環境は4.01 Transitional charset=Shift_JIS (Dreamweaver CS4で作成)となっとります。
tableはcollapse。
table関連のborderは0。
ブロック化したa要素に赤いborderを指定して、画像と同じheightを持たせてあります。
IE8

Firefox 

以下は、IE7以前のIE対策となります。

結論を急ぐと発生条件は、
imgに対する vertical-align:bottom; の指定と
全称セレクタやbody に指定したヒラギノやメイリオを含むfont-familyの組み合わせ。
img の vertical-align指定が必須な場合。

と指定していたら、それを

とすると何故か解消。osakaとか入っても大丈夫です。
その後、bodyや外のボックスに対してヒラギノ、メイリオ含むfont-family指定しても何故か謎の隙間は現れません。

全称セレクタは上書きされるはずなのですが、font-familyが上書きされないような???

もっと良いのは

と特定のimg要素をブロックにしてしまうことです。(hogeはクラス指定)
そうすると、遠慮無くfont-familyも、他の画像のvertical-alignも指定できます。
vertical-alignは判るような気がしないでもないですが、なんでfont-familyが影響するんでしょうか?
line-heightあたり?
っていうか、IE8がビミョー<(`^´)>なのか、なんなのか。どっちなんだい?
safariもイケテルとはいえ、絶対的だと言う訳ではありませんからねぇ。IE8が偉いのかも

そうそう、自サイトデザインをちこっと変えたんですが、safariバグってます。
margin-rightを%指定、margin-leftをautoに指定で、不審な挙動を。
興味がおありでしたら、『さわやかまみれ』のcontactページご覧下さい。画面を横に狭めてゆくと、おもろいことが起こります。ムキーッ。(現在は起こりません)

コメントをどうぞ



PageTop