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

CSS。IEの互換モードで、body要素に対して、またはbody要素にclassやidを設定してそれらを指定するセレクタを使って、widthを設定しても反映されません。常にブラウザの横幅いっぱいにbodyが表示されます(backgroundに色をつけて確認)。バグでしょうか?バグでしたらそれについて紹介しているURLを、そうでなければ解決方法に心当たりがあれば教えてください。

●質問者: renmin-plus
●カテゴリ:ウェブ制作
✍キーワード:background BODY Class CSS IE
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● vwxyz
●60ポイント

http://www.asahi-net.or.jp/~bd9y-ktu/html4rec_f/struct/global.ht...

バグではないと思います。

<body>?<body>要素はブラウザのウィンドウで表示される全領域に対応します。なので最大化していればモニタ一杯まで表示されますし、小さくすれば小さくなります。これは標準準拠モード、互換モードいずれでも変わらないと思います。


URL先にあるHTMLの仕様書では「文書のbody部分には、文書内容がきます。内容の表現はブラウザによって様々です。視覚的(ビジュアル)ブラウザなら体部(body)をキャンバスに見たてることができそこに内容が表われます:テキスト・イメージ・色・グラフなど。読み取りのできるブラウザなら内容を読み上げます。」とあります。


なのでたとえば横幅500ピクセルの箱でも作りたいときは、body要素の中にdiv要素などのブロックレベル要素を挿入してそれにスタイルを別途指定すれば作れると思います。

◎質問者からの返答

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

再度試してみました。background-colorで確認した、というのにちょっと語弊がありました。bodyのbackground-colorは確かに標準モードでもブラウザいっぱいに広がりました。ちょっと質問内容を訂正します。

width指定したbodyの中に、widthをパーセンテージ指定したdiv要素を配置すると、そのdiv要素の横幅は、bodyで指定したwidthを基準にして決定される(IE6標準モード,Firefoxで確認)のに、互換モードではそうならない、です。

よろしくお願いします。


2 ● Momonga
●5ポイント

http://www.microsoft.com/japan/developer/library/jpisdk/dhtml/re...

MSDN Online Japan : File Not Found

URLはIE4当時のDHTMLのリファレンスですが、これをみるとbody要素にwidth属性を与えることは、仕様として認めていないようですね。簡単なページを作ってやってみましたが、IE6でも同様の状態であることから、仕様としてbody要素にwidth属性を与えないことは、IEとしての仕様として考えるとよいようです。body要素は、コンテンツのルート要素であるため、幅を制限する必要は無い、という考え方なのではないかと思われます。

個人的には、コンテンツ領域を制限するためには、div要素やtable要素を利用するようにしています。この方法の場合、body要素の仕様を気にすることなく制御できますので、かえって楽だと思っています。

◎質問者からの返答

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

バグであれなんであれ、旧バージョンのIEで表示がくずれるのはまずいので、回避策がbodyの下にコンテンツ領域となるdiv要素を作ること、なら、そうすることになると思います。が、とりあえず正しい仕様が気になります。。。質問にちょっと不備があって、訂正を1人目の回答者のコメント欄に記入しました。よろしくお願いします。


3 ● Mars
●5ポイント

標準モードでできて、互換モードでならないのはIE5.5までは body=html=キャンパス にしていた…というか、明確に区別されていなかったからです。

昔の動作を再現しているという意味では正しいといえるのかも。

◎質問者からの返答

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

W3Cの定める仕様に対して何が正しくて、で、古いIEがそれに準拠していないのなら、それについて言及しているURLを挙げてほしい、という質問です。

関連質問


●質問をもっと探す●



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