またしてもIE6に泣かされるるるる。
ナビとかをliで作るのは定番中の定番で
何回もやっているんだけど
画像を並べるとIE6では余白ができちゃう。
で、毎回いろんな方法で余白対策をしているんだけど
今回は今までのだけだとどうしても余白がなくならず。
(一番の問題は高さがまちまちだったってことなんだけど)
で、どう対処したか。
liを画像にした際に画像の下につく余計な余白を削除
①ulにline-height:0;を設定
②liにline-height:0;を設定。
↑
いつもどおり。
③liにvartical-align:bottomを設定
↑
ここが新しいw
こうすれば画像下の余白がなくなる。
なるほど。
で、今回は回りを囲む線の設定を
borderでしていたんだけど
これも結構挙動がおかしいので
背景に色を設定してpaddingで対応したほうが
いいみたい。
こうすれば
1辺だけ太さを変更したいとき
結構楽に変更できるし。
線だといちいち4辺に対して線種、太さ、線の色を
設定しないとならなくなるじゃん。
イヒヒ。
ナビとかをliで作るのは定番中の定番で
何回もやっているんだけど
画像を並べるとIE6では余白ができちゃう。
で、毎回いろんな方法で余白対策をしているんだけど
今回は今までのだけだとどうしても余白がなくならず。
(一番の問題は高さがまちまちだったってことなんだけど)
で、どう対処したか。
liを画像にした際に画像の下につく余計な余白を削除
①ulにline-height:0;を設定
②liにline-height:0;を設定。
↑
いつもどおり。
③liにvartical-align:bottomを設定
↑
ここが新しいw
こうすれば画像下の余白がなくなる。
なるほど。
で、今回は回りを囲む線の設定を
borderでしていたんだけど
これも結構挙動がおかしいので
背景に色を設定してpaddingで対応したほうが
いいみたい。
こうすれば
1辺だけ太さを変更したいとき
結構楽に変更できるし。
線だといちいち4辺に対して線種、太さ、線の色を
設定しないとならなくなるじゃん。
イヒヒ。