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

CSSについて教えてください。
以下のURLのページ
http://www.home-p-test2.com/ok.html
で、配置したボックスwrapperをページ下部までいっぱいに表示させたいと思っています。切れ目なく右のグレーの背景画像と左右のボーダーを表示したいのです。
上記URLはOKなのですが、中のコンテンツが下に長くなり、スクロールが出ると、IE7のみ、ページに表示されていない部分が
切れてしまいます。(スクロールすると、スクロールして見えてくる下の部分のボーダー線と背景画像が表示されないで消えている)
IE7のみボックスのwrapperがページ全体に広がらないのです。
以下がNGのページです。
http://www.home-p-test2.com/ng.html
IE6,FirefoxはOKなんですが...
なにか単純なコードミスかもしれません...はまってしまいまして...どなたか教えていただけないでしょか?
よろしくお願いします。

●質問者: moriamko44728
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS firefox IE6 IE7 ng
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● やちまう
●40ポイント ベストアンサー

bodyセレクタのheightプロパティを指定しなければOKなのでは?


body{
margin: 0;
padding: 0;
/*height: 100%;*/
text-align: center;
background-color: #FCC
}

コメントアウトしただけで直りました…。

◎質問者からの返答

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

お??そこでしたか.....すいません...単純ミスでしたね。でもIE7だけなぜなんでしょうね??

IE6でチェックをメインにしていたもので見落としていました。

助かりました!!


2 ● やちまう
●40ポイント

(↑についての補足です。)


IE7のレンダリングはご存じの通り「標準モード」と「互換モード」がありますが、

標準モードではソースを読み込みながら、DOM要素を外側からレンダリングしているような気がします。(推測)


bodyセレクタを解釈した時点ではBODYタグの“中身”がレンダリングされておらず、

とりあえずの可視部分(つまり、ブラウザのウインドウ範囲)をレンダリング確定(height:100%;)してしまい、

その後でBODYタグの中身がレンダリングされて、要素がはみ出てしまうのではないでしょうか。


DOCTYPE宣言を外して「互換モード」でレンダリングさせると現象が起こりませんので、

IE7の表示モードに起因したもののように思います。

◎質問者からの返答

なるほど。。少しすっきりしなかったのですが、ご説明いただいてすっきりしました。

確かに、そう言われて考えて見ますと、納得です。

本当にありがとうございます!!!

関連質問


●質問をもっと探す●



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