IEのレイアウトで困った事

Firefoxでは正しくレイアウトされるのに、どうにもIEには困らされました。

わがままな上司といった感じですな。

以下、困った事と対応策をメモしておきます。

問題,対応
floatされた子要素の高さが親要素のボーダーを含めた高さになる。このため、親要素のボーダーが子要素により隠される。,ボックスモデルの問題なので、本質的な対応は出来ない。
hrの上下にCSSで指定できない余白が取られる。,本意ではないが、divタグで代用。style=”line-height: 1px; margin: 0px; border: 0px; border-top: 1px solid #ff9999; padding: 0px;”
イメージタグの後に改行があると、余分な余白が取られる。,イメージタグの後の改行を取る。htmlは非常に読みにくくなりますが、仕方なし。
input(hidden)タグが連続している場合、改行があると余分な余白が取られる。,input(hidden)タグの後の改行を取る。htmlは非常に読みにくくなりますが、仕方なし。
widthにマージンとボーダーが含まれてしまう。,スタイルに_widthを指定して対応。本来は不正なスタイルだがIEはwidthとして認識。

他にも色々あったと思うけれども、今思い出せるのはこれぐらい。

しかし、ボックスモデルがいいかげんなのと改行でレイアウトが崩れるのには本当に困った。

もっと困るのは、IEが事実上の標準だという事ですが、どうしようもなし。

Firefoxには期待してます!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください