人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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を書き込めば良いでしょうか?

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

よろしくお願いします。

1292908558
●拡大する

●質問者: peach555
●カテゴリ:ウェブ制作
✍キーワード:CSS firefox IE7 いただきます スタイルシート
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● JULY
●27ポイント

まず、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>
◎質問者からの返答

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


2 ● あすか
●27ポイント

こんな感じになります。

<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>
◎質問者からの返答

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

無事解決いたしました。


3 ● kaz
●26ポイント
<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 のバグが問題になります。



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

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


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

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

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ