- 2004-02-20 (金)
- Movable Type
前回のエントリの続き。コンテンツ全体を <DIV align=center></DIV>タグで挟んで中央寄せ表示にする作戦は、「MacOS X + Safari で見ると 表示が崩れている」という結果でもろくも崩れ去ったものの、対処方法見つけました。myBlog JAPANで探したら、簡単に「画面中央寄せ」サイトがゴロゴロ出てきたのでしっかり参考にさせてもらった次第です。
で、MacOS Xでの表示崩れを解消するには、
<HTML>
<HEAD></HEAD>
<BODY>
<DIV align="center">
<DIV align="left" style="width: 760px;
background-color: #fff;">
<!-- blog コンテンツ全体 -->
<BR clear=all>
</DIV>
</DIV>
</BODY>
</HTML>
というように、下地レイヤの閉じタグ直前に "<BR clear=all>" タグをいれてやると正しく表示されるようです。ちなみに win版の DreamweaverMX2004 でも MacOS X + Safari と同じように表示が崩れた状態になったけれど、やっぱり "<BR clear=all>" をいれてやると直ります。こっちの方がCSS正規の仕様なの？
やっぱり IE は強引に不具合を修正してくれてたの？
よくわからないけど、調べるの面倒くさいし解決したので良しとする。
そしてもうひとつ。画面中央寄せ表示を実現する方法の1つに、
margin-right: auto;
marigin-left: auto;
というのがあるようです（uchiyさんのstyles-site.cssにて発見。Thanx!）。早速 iandeth でも採用、最終的に中央寄せの記述はこんな感じになりました：
<HTML>
<HEAD></HEAD>
<BODY>
<DIV style="width: 760px; background-color: #fff;
margin-right: auto; marigin-left: auto;">
<!-- blog コンテンツ全体 -->
<BR clear=all>
</DIV>
</BODY>
</HTML>