今作成している案件で、どういうわけか理由のわからない現象が発生したので備忘録的メモ。
問題の原因などがあったら追記しようと思います。
とりあえず現象が起きているサンプルを見てもらったほうがわかりやすいかと思います。
▼サンプルはこちら
IEで、背景を指定すると余白が消えるサンプル1
IEで、背景を指定すると余白が消えるサンプル2
さて、サンプル1が思惑通りにタブメニューになっているもの、サンプル2が下のborderが消えてしまっているものです。(サンプルが適当ですいません(;´д`))
ちなみに、サンプル1と2の違いは、borderを表示するためのdiv要素に、背景を指定しているか、いないか、の違いだけです。
IE7、6では、なぜか背景を指定すると、padding-bottomの設定を無視して高さが失われます。
(背景を指定しないと正常にpadding-bottomが適用されます)
Firefox2.0では特にこういった現象はありませんでした。
とりあえず、背景を指定したい場合は、さらにその外側にdiv要素を配置して、そこに背景を指定するしかなさそうです。
ちなみに、IE5.5ではどうしてもborderが出てきませんでした・・。