あるサイトのhtmlをいじくっていて、はまった。
もともとのものはロゴ画像をdivで左上に position: absolute; ではりつけていた。これをせっかくだからh1にしようと考えてちょいと書換えた。
手元でチェックできるブラウザのうち、IE6とOpera7はdivで書いてあったときと同様の結果となった。position: absolute; だし、divをh1に変えただけなので、まあそんなもんだろ、と思ったのだが FireFox だけはちょっと違う場所に表示されるようになってしまった。なぜか下の方にずれてしまう。
絶対座標で指定しているものがブラウザによって表示される場所がずれるなんて、思いもよらなかった。div に戻すと期待通りになる。はて。
結局教えてもらったんだけど、h1にはmarginとかpaddingのデフォルト値が当然あるわけで、それを 0 にするとうまくいった。なるほどねえ。
上のようにしてロゴをh1で左上に表示することはできた。メインの部分にはh2とかが最初にくることになるので、ロゴ画像の高さのぶん h2 に margin-top を指定して重ならないようにする。OperaもFireFoxもOKで、よし終わり、と思ったら IE6 では指定したはずの margin が 0 になって重なってしまう。
これは margin-top を確保した h2 の前に <div></div> と書くと期待通りになった。なるほど、とはとても思えないが。