1292908558 CSSスタイルシートの設定について教えてください。


IE7では、意図したように表示されるのですが、Firefox 3.6.13 では
意図したように表示されません。

一つのボックス内に、もう一つのボックスを、余白付きで表示させたい
だけなのですが、上手く行きません。

<div style="background-color:#FF0000;width:300px;height:150px;text-align:center">
<div style="background-color:#FFFF00;width:200px;height:100px;margin-top:20px"></div>
</div>

(わかりやすいように、CSSは直接書き込みました。CSS初心者です。)

一般的なブラウザ間で、同じように表示されるようにしたいのですが、
どのようにCSSを書き込めば良いでしょうか?

わかりやすくするために、説明画像を添付させていただきます。
教えていただけるととても助かります。

よろしくお願いします。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/12/21 14:15:59
  • 終了:2010/12/21 17:37:07

回答(3件)

id:JULY No.1

JULY回答回数966ベストアンサー獲得回数2472010/12/21 15:21:33

ポイント27pt

まず、margin-top が効いていないのは、「マージンの相殺」によるものです。

marginの相殺[to-R]

入れ子関係にある2つの div の間で、縦方向の相殺が行われ、上記ページの「ボックス内にボックスがある場合のマージンの相殺」に該当しています。

これを回避するには、position を relative にして、top で縦位置を指定してやります。

position - 配置方法を指定する - CSSリファレンス:ITpro

次に、横のセンタリングですが、これは、text-align が「ブロック要素の内容の配置位置」に作用するもので、ブロックそのものがセンタリングされる訳ではありません。

ブロック自体をセンタリングするには、内側の div で margin-left と margin-right を auto に設定します。

ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト

これだと、IE と Firefox(というか IE 以外)で CSS を分けなきゃいけないように思われますが、少なくとも IE8 以降であれば、標準互換モードで表示されるようにすれば、同じ CSS で行けます。

例えば、下記のようにすると、Firefox と IE8 で同じように表示されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div style="background-color:#FF0000;width:300px;height:150px">
<div style="position:relative;background-color:#FFFF00;width:200px;height:100px;top:20px;margin-left:auto;margin-right:auto"></div>
</div>
</body>
</html>
id:peach555

ご丁寧にありがとうございました。

2010/12/21 16:05:10
id:asuka645 No.2

あすか回答回数856ベストアンサー獲得回数972010/12/21 15:26:24

ポイント27pt

こんな感じになります。

<div style="position:absolute;background-color:#FF0000;width:300px;height:150px;margin-top:0px;">
<div style="position:absolute;background-color:#FFFF00;width:200px;height:100px; margin-top:20px; margin-left:50px;"></div>
id:peach555

回答ありがとうございました。

無事解決いたしました。

2010/12/21 16:05:13
id:kaz No.3

kaz回答回数200ベストアンサー獲得回数422010/12/21 16:03:22

ポイント26pt
<div style="background-color:#FF0000;width:300px;text-align:center;padding:25px 0;">
<div style="background-color:#FFFF00;width:200px;height:100px;margin:0 auto"></div>
</div>

CSS の仕様上は Firefox の表示が正しく、

IE7 で意図した表示になっているのは、以下の IE のバグによるものです。


1:text-align:center でブロック要素もセンタリングされてしまう

2:垂直方向の margin の相殺が正しく行われない


■1の解決

ブロック要素(この場合 div)をセンタリングする方法はいくつかありますが、

中に入る div の横 margin を auto 指定する方法が簡単です。

(要素の寸法が完全に固定なら、数値で直接指定しても構いません)


■2の解決

こちらは、やや難解です。

まず「親要素に padding または border 指定が無い場合、

子要素における、その方向の margin は相殺される」という仕様があります。

これ自体の対処法は「親要素に padding か border を指定すればいい」と単純ですが、

ここでさらに、以下の IE のバグが問題になります。


  • 要素の幅・高さなどは、padding / border を含めて計算されるが、IE では含めず計算されてしまう

意図するレイアウトによって解決のアプローチはいくつかありますが、

親要素(この場合外側の div)の高さは指定せず、余白分の padding を指定する方法が簡単です。


なお、CSS での表示に関しては

「バグだらけの IE」と「おおむね正しいそれ以外のブラウザ」という状態なので、

IE 以外のブラウザをを完全無視する場合を除いて、Firefox などを基準にする事をおすすめします。

id:peach555

回答ありがとうございました。

2010/12/21 16:06:14
  • id:tezcello
    よそ見している間に締め切られてしまいました...
    せっかくなので、コメントに。

    内側の margin-top が効いていないように見えるのは、margin の相殺のせいです。
    「css margin 相殺」でググってみるといろいろと例が見つかると思います。
    対策としては、内容が空の場合に起きるので、空にならないよう(普通に文字などいれる)にすればOK.
    ごまかしでよければ、相殺されない padding を使う手もあり。

    ブロック要素のセンタリングは、こちらの記述が詳しいです。
    http://www.mozilla.gr.jp/standards/webtips0004.html

    で、こんな感じ。
    <div style="background-color:#FF0000;width:300px;height:150px;text-align:center;padding-top: 1px;">
    <div style="background-color:#FFFF00;width:200px;height:100px;margin: 19px auto 0;text-align:left;">

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません