2011.06.30

table-cellを指定した時、paddingの解釈がブラウザによって異なった

このblogのデザインを更新しまして、日ごとの小見出し周りのcssで嵌りました。

ココログの日ごとの小見出しはh3で書かれております。親要素はカラムを囲う大きなボックス。
h3の親としてwrapとか仕様上ムリなのでh3の背景に直で画像を置くことにしました。
吹き出しなので上下真ん中に行が来てほしいのですが、もしかして2行に渡る広大なタイトルをつける日がくるかもしれず、下記のような

line-heightを使った垂直方向真ん中文字揃えが使えません。うーむ。
そこで、table-cellをつかった方法を用いたところ、

縦方向のpaddingの解釈がSafariとFirefoxで異なってしましました。
Safariではheight:70pxに上paddingの10pxが加算される(通常のボックスモデル通り)
Firefoxではheight:70px内に上padding 10pxが含まれる(heightは70pxのまま)
という結果になってしまいました。
横方向のpaddingに関しては両ブラウザともwidth:555px内に含まれるようです。
なぜ垂直方向に揃うtabble-cellとvertical-align:middleを使いながら、上のpadding が欲しいかというとtable-cellの効かないIE6−7対策で( ;^ω^ )。
結局、SafariとFirefoxで整合が取れないので上paddingを廃して、IE hackに逃げました…。

table-cellに置けるpaddingの解釈に関しては、調べきれませんでした。
table-cellはブロックレベルボックスのようなのでFirefoxの解釈がおかしいことになりますが(だとすると横方向のpaddingはなぜsafariでも含まれる???)、
table-cellが<td>と同様だとしたら、height内で内容と上下paddingが収まれば、伸張しないちゅーことなんでしょうか?
謎が謎のまま終わってしまいもうしわけありませんが、解釈がブラウザによって違うようということで。
table-cellでのpaddingは可能なら内容物にセットした方がよさそうです。

コメントをどうぞ



PageTop