またしてもIE6に泣かされるるるる。

ナビとかをliで作るのは定番中の定番で
何回もやっているんだけど
画像を並べるとIE6では余白ができちゃう。

で、毎回いろんな方法で余白対策をしているんだけど
今回は今までのだけだとどうしても余白がなくならず。
(一番の問題は高さがまちまちだったってことなんだけど)

で、どう対処したか。

liを画像にした際に画像の下につく余計な余白を削除
①ulにline-height:0;を設定
②liにline-height:0;を設定。

いつもどおり。

③liにvartical-align:bottomを設定

ここが新しいw

こうすれば画像下の余白がなくなる。

なるほど。

で、今回は回りを囲む線の設定を
borderでしていたんだけど
これも結構挙動がおかしいので
背景に色を設定してpaddingで対応したほうが
いいみたい。

こうすれば
1辺だけ太さを変更したいとき
結構楽に変更できるし。
線だといちいち4辺に対して線種、太さ、線の色を
設定しないとならなくなるじゃん。

イヒヒ。