スタイルシートで以下のように指定しbodyをセンタリングします。

-----CCS-----
html{text-align:center;}
html,body{height:100%;}
body{
margin:0px auto;
width:580px;
text-align:left;
}

-----HTML4.01 strict-----
<html>

<body>
<h1>・・・</h1>
<ul>・・・</ul>
<h2>・・・</h2>
<p>・・・
<h2>・・・</h2>
<p>・・・
----------

これをwin IE6で確認すると、h2以下の内容がbodyの外(画面100%の直下)にはみ出します。
win Safari5でも同様です。
IE6では、body直下にコンテナとしてdivを置きwidthを指定してやれば解決します。
Safari5ではbody直下にコンテナとしてdivを置くだけで解決します。

なぜこのような現象が起きるのでしょうか?
htmlにtext-alignを指定したりbodyを直接センタリングしているので不安は少々あるのですが…。

h2以下が下がる原因としてh1とulとの相違点(margin-topの指定や文字センタリング)を確認し修正してみたりしましたが解決はしませんでした。
なお、フロートや固定などの表示方法は指定していません。

原因を推察できる方、ぜひ回答お願いいたします。
こういった指定をしていないか、など上記の記述が足りなければご指摘ください。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

>htmlにtext-alignを指定したりbodyを直接センタリングしているので不安は少々あるのですが…。



何かのテクニックでなければ辞めましょう。
いや、そもそも、
HTML4.01 strictなんだからbody直下のdivから始めましょうよ。
そのセレクタを一段ずつ下げて指定した方が良いでしょう。
    • good
    • 0
この回答へのお礼

>HTML4.01 strictなんだからbody直下のdivから始めましょうよ。
やはりそれが最適ですよね。
今回はちょっとした検証のつもりだったのですが、実用的でないのは確認できましたので、終了しようかと思います。
なぜh2以下だけが、と疑問はありますが。

◇試す人も少ないでしょうが補足
私の場合、IE6ではh1以下の表示に幾分時間を要しました。

お二方、ご回答ありがとうございました。
こちらをベストアンサーとし締め切らせていただきます。

お礼日時:2011/04/22 10:53

Bodyのセンタリングですか?



<CENTER> </CENTER>でくくればいいですけど。

最後の
</HTML>が抜けているだけのような気もしますが・・・・

IEは結構適当に組んでも出ますけど、ネットスケープなど、命令が違う場合もあります
<TBODY>使ったり
<TR>
<TD>
使うのも一つの解決にはなると思います。

text-align:left; 580pxの枠で左に寄せなさいと書いていますが??

この回答への補足

お早い回答ありがとうございます。

目的はbodyそのもののセンタリングです。
通常はdivをbody直下に置き、

body{text-align:center;}/*IE対策:divをセンタリング*/
div{
margin:0px auto;/*IE以外のブラウザ:divをセンタリング*/
text-align:left;/*IE対策で指定されたセンタリングをdiv内では解除*/
}

などとしてdivをセンタリングするわけですが、bodyを直にセンタリングすることも可能だというので、htmlとbodyにそれぞれの指定を移して検証してみたのです。
これだとbody直下に広告などが入る場合でもレイアウトとの調整が効きますので。
しかし、やはりあまり推奨される方法ではないのでしょうね。
h2以下だけが下がるのは気にかかりますが…。

htmlの終了タグですが、省略可能なものは省いてます。
念のためきちんと記述してみましたが、変化はありませんでした。

><TBODY>使ったり
表でもないので今回は使用しませんが、最近は疎遠にしすぎて使い方忘れていそうです(笑)

補足日時:2011/04/22 10:41
    • good
    • 0
この回答へのお礼

回答ありがとうございました。
検証は終了し、やはり無難にdivを置いておこうかと思います。

お礼日時:2011/04/22 10:44

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング

おすすめ情報