仕事・・というか、会社で使う内部サイト制作を行っているけど、思ったようなCSSの状態になってくれない。
ざっと言えば、こんなHTMLを書いていて、（かなり雑な感じですが・・・）
で、CSSで
っておいたら、#headerのほうにマージンがかかってしまう。どうもFirefoxだけっぽい。
うーん、おかしい。もう少し調べてみようと思うけど・・・。なんかぼやーっとしてるんだろうか・・・。どーんとした基本部分で間違っているような気がしてならない・・。
ってことで調べてみたら・・・
「相殺」というワードが。
つまりは
これがIE7ではブラウザの実装差異によって、問題なく表示されるとのこと。うーん、勉強になる。
んが、しかし、よくこれまで、この状況にならなかったなぁと逆に自分を思った。
ちょっと調整してみようっと。
<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だけっぽい。
うーん、おかしい。もう少し調べてみようと思うけど・・・。なんかぼやーっとしてるんだろうか・・・。どーんとした基本部分で間違っているような気がしてならない・・。
ってことで調べてみたら・・・
「相殺」というワードが。
つまりは
親ボックスに borということらしい。der と padd ing が指定されて いないとき、
子ボックスにマージンがあると、両ボックス 間でマージンの
相殺が行われる
これがIE7ではブラウザの実装差異によって、問題なく表示されるとのこと。うーん、勉強になる。
んが、しかし、よくこれまで、この状況にならなかったなぁと逆に自分を思った。
ちょっと調整してみようっと。
