CSSでちょっとおかしいぞ？何があった？

2008年2月26日 23:19

仕事・・というか、会社で使う内部サイト制作を行っているけど、思ったようなCSSの状態になってくれない。
<html>
    <head><title>CSSでおかしい</title></head>
    <body>
       <div id="header">
          <h1>見出し１</h1>
          <ul>
             <li>aaa</li>
             <li>bbb</li>
          </ul>
       </div>
    </body>
</html>


ざっと言えば、こんなHTMLを書いていて、（かなり雑な感じですが・・・）
で、CSSで
#header{
    height:60px;
    background-image:url("画像パス");
}
#ul{
    margin-top:20px;
}


っておいたら、#headerのほうにマージンがかかってしまう。どうもFirefoxだけっぽい。
うーん、おかしい。もう少し調べてみようと思うけど・・・。なんかぼやーっとしてるんだろうか・・・。どーんとした基本部分で間違っているような気がしてならない・・。


ってことで調べてみたら・・・

「相殺」というワードが。
つまりは
親ボックスに border と padding が指定されていないとき、
子ボックスにマージンがあると、両ボックス間でマージンの
相殺が行われる
ということらしい。
これがIE7ではブラウザの実装差異によって、問題なく表示されるとのこと。うーん、勉強になる。

んが、しかし、よくこれまで、この状況にならなかったなぁと逆に自分を思った。
ちょっと調整してみようっと。

CSS | comment(0) | trackback(0) | ▲

このブログ記事に対するトラックバックURL:

コメントする