横並び定義リストのIEバージョンごとの補正について

定義リストを横並びにするとIE6とIE7でdt dlが微妙にずれる paddingをとる箇所が違って行間が伸びるということがありました。

それを気合と目分量と屁理屈で一週間かかってなおしたので、忘れぬように書いておこうと思います。

同じCSSをつかっては以下のようにpaddingがclassではなく<dl></dl>ごとに適応されて間延びしてしまいます。


同じCSS


 


CSSにIE6とIE7の修正をいれた後



 

なおしたCSSは IE6 7にはpaddingをdt ddにいれて 横並びのずれをなおし IE6にはmarginもくわえました。
他にHTMLもバナーを背景指定するのをやめて普通の画像タグに変えました。背景にするとIE8 FX Chromeは背景を読まずにpaddingを指定しますが,
IE6 7 は背景であってもバナーの下からを指定するので、この間隔もIE6 7でずいぶん広がってしまうための変更です。
目分量で これくらいかなを何回も繰り返し とにかく見た目なんとか並びました。

ネット検索ではIEは画像をdt ddに入れるとずれるという記載があったのですがIE8では少なくとも大丈夫です。今回は上ぞろえに見えるようにしました。

SyntaxHighlighterがうまくつかえず申しわけない。brがはいってしまうので うまくできるようになったらつたないcssをアップいたします。

コメントを残す

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