前回の話のつづき…同じようなレイアウトで、画像をディバイダーとして使いました。
赤い線の上下のアキを均等にしたい。
ディバイダーとして使用している画像に”divider”というクラス名をつけて、cssで以下のように指定すると、Firefox、IE8、Safariでは上記の赤い線のように、上下のアキが均等になります。
img.divider{ width: 171px; height: 2px; padding: 0 10px; }
でもIE7では、こんなカンジになっちゃうの…。
デバイダー画像の上のアキがスゴイ…
前回のようにCSS部分にmargin:0を追加してもダメで、ソレはimgがインライン要素だからというのは理解できるのですが、インライン要素でline-heightが関係しているなら、別でちゃんと指定してるんだよね〜。しかもline-heightをいじっても、状況は変わらないし…。いずれにしてもIEではオカシナ状況になってしまうので、今回もimgにクラスを直接割り当てるのではなく、divタグで囲ってソレにスタイルを指定しました。解決です！
