2009.09.11

うるぁぁぁ〜っIE8っ!

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

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

ただ今、出向中です。よそ様のサイトを作っております。
サイト作りプロではないので、かなり困ったちゃん。
特にIE8!
いや、IE6…はもっとですが。それはデフォルト。
IE8には期待してた訳で非常にがっがり。
よそ様のサイトはがんばるとしても、自分のサイトはIEのみなさんすまぬ!超すまぬ!と思いつつもIE対策は放置している訳ですから。(ちょっとしてる)
今回、困ったこと。

(以下、語弊があり9月26日訂正しております)***************************

1.テーブルに入れた画像の下にスペースがとられる
テーブルにリンクボタンを敷き詰めた状況。
「概要」とか「経歴」とかのマス目リンク群だす。リストがスマートなんだろうけど、テーブルの用途としても間違ってはいないだろうと、自分を慰めつつ、手っ取り早い方を選んだのれす。…〆切が。
各<td>内にただ画像を並べた段階では問題なし。
ボタン画像にリンクを貼ったとたん、<td>と下の<td>の間のスペースが広がってしまいました。
結論を急ぐと悪いのは
img { vertical-align:bottom;}
の所為でした。
症例は

  • 次の<tr>とやたら隙間が空く。
  • a { display:block; height:20px;}の指定で画像の上部に謎の隙間が出来、尚かつ、画像の下が切れる。

ロールオーバー画像なんで display:block にする必要はないのですが、ブロック要素にしてやったらどうなの!ってことで。
ムダでした、ムダなどころか画像の下が切れて表示されないという、ダメの上塗り。

ie8の互換バグ

状況説明画像

ブロックの高さの下端よりも下にa要素のボトムラインがあって、そこに画像のボトムラインが揃ってるってことですよね。
インライン要素をブロック化しても、ボトムラインは高さの下端になんらんのでしょか?
しかも、vertical-align:bottom;ではみ出た画像下部分が、なぜかoverflow:hidden;のような挙動。
なぜはみ出ないのか。
意味判らんです。はい。
(以上9月26日訂正)
*********************************

2.お約束リストの隙間に困る。
こちらは、上記とは関係ないところのお約束のアレ、
さんざん既出の「画像を縦リストで並べた時の謎の隙間」です。
li {line-heigth :0;}
li a {line-height:normal;}
では、解決せず。
<!–
–>
こういうのでも、なしに。

で解決した…。もう、それ直して…。
以上、困ったこと2点でした。
まだ、2点しか無いんだから、もしかしたら及第点なのかもしれんっす…safariやfirefox並にならんものでしょうかねぇ。

(9月26日からの後日談)*********************************
と、原因はわからんけど、発生条件と対処方をしつこく探った解決編はこちら☆
『うるぁぁぁ〜っIE8っ!vol.3 検証してみた』
なんぞこれヒィー(((゚Д゚)))ガタガタ

コメントをどうぞ



PageTop