- 締切済み
chromeだけbody直下に空白が開く
ワードプレスを使い、サイトを構築中です。 chrome、ie８、Firefox、Safariで、見え方をチェックしていたところchromeだけ、<body>直下に空白ができます。 何が原因なのかわかりませんでしょうか。 htmlソース（一部） ------------------------ <body> <div class="wrap_h"> <h1>テスト運営中</h1> </div><!-- wrap_h --> ------------------------- body、h1、wrap_h のcss（一部） ------------------------- body { margin:0; padding:0; font-family:"ＭＳ ゴシック","ヒラギノ角ゴ Pro W3","平成角ゴシック",monospace,"Courier New"; background:url(img/body_back.gif) repeat-x; font-size:1em; } h1,h2,h3,h4,h5,h6,form { margin:0; padding:0; } .wrap_h , .wrap { margin:0 auto; padding:0; width:920px; } h1 { font-size:0.8em; color:#fff; font-weight:normal; line-height:30px; margin:0 0 10px 0; padding:0; } ----------------------------- 参考の画像も添付しますのでよろしくお願いします。
- みんなの回答 （7）
- 専門家の回答
みんなの回答
- naokita
- ベストアンサー率57% (1008/1745)
Choromeのレンチマーク（設定）から ツール → デベロッパーツール にて、 body もしくは、 body直下の div の CSS styleを見れば一目瞭然では？ CSS適応のチェックボックスをONやOFFにしてみるとか。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
div{border:solid 1px gray;} だと？？？
お礼
解決しました。 詳しくは、最終の回答のお礼欄に記載します。 ありがとうございました。
こんばんは。コードをコピペ試してみましたが、私の環境ではwin, mac 共にchromeで問題なく（隙間なく）表示されています（background 画像はないので、こちらの手元にあるものを使いました）。 試しに、Firefox、Opera、Safariでも試しましたが、上記のコードであれば、すべて同じ見え方（隙間なし）で表示されています。 もしかしたら、開示されたＣＳＳ以外の何かが影響しているのかもしれませんが、そうなると原因は多岐に渡るので一概に何だとは言えなくなるかもしれませんね。 解決にはなりませんが、貼りつけてあるコードは、少なくとも私の環境では問題ないということは報告しておきます。
お礼
解決しました。 詳しくは、最終の回答のお礼欄に記載します。 ありがとうございました。
- sora1tora2
- ベストアンサー率69% (27/39)
こんにちは CSSリセットは試されましたか？ 一番簡単なやり方は *{ margin: 0; padding: 0; } ただ、このやり方だと意図しない要素もリセットされてしまう という理由で今はあまり使われていませんが。 参考になればよいのですが。
お礼
解決しました。 詳しくは、最終の回答のお礼欄に記載します。 ありがとうございました。
- 4017B
- ベストアンサー率73% (1336/1814)
例文のHTMLとCSSのみでは、自分の環境下（Chrome 11.0.696.71）では正常に。つまり上部に隙間無く表示されます。なので、何かそれ以外の他の部分のCSSなり、HTMLが影響してるんじゃないでしょうか？ また、基本的に Safari と Chrome は、同じWebkitエンジンを使用していますので。極端に違った表示のされ方はしないので。Safariで問題無く、Chromeだけ可笑しいというのなら、問題は何かChrome側にあるかもしれません（何か個別の拡張機能とか？）。
お礼
解決しました。 詳しくは、最終の回答のお礼欄に記載します。 ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
XHTMLかな CSSの最初に html,body{margin:0;padding:0;} と書いておく・・・
お礼
決しました。 詳しくは、最終の回答のお礼欄に記載します。 ありがとうございました。
補足
試しましたがだめでした。 引き続き情報よろしくお願いします。
- t_ohta
- ベストアンサー率38% (5238/13705)
cssに以下の内容を入れてみたら変わりませんでしょうか。 WordPressバージョンが分からないので適切かは分かりませんが、ちょっとまえのバージョンアップでWordPressがデフォルト指定しているスタイルのせいで隙間が出るようになった事がありましたが、その時はオリジナルのcssに以下の記述を加えたら隙間が出なくなりました。 html { margin: 0px !important; }
お礼
解決しました。 詳しくは、最終の回答のお礼欄に記載します。 ありがとうございました。
補足
試しましたが、だめでした。 ワードプレスのバージョンですが、昨日3.1.0から3.1.3にアップデートしたところなのですが、 3.1.0、3.1.3ともに同じ症状です。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
デベロッパーツール初めて知りました。私の知識ではいまいち理解できない部分もありましたが、勉強になりました。 さて、自分なりにいろいろ試したところ、とりあえず解決いたしましたので報告します。 結論：ログイン状態だとすきまができる。ie、Firefox、Safariも同様にすきまができる。 ログアウトすれば、すきまが無くなる。 chromeのみログインしていましたので、このような質問タイトルになりましたが、原因はchromeではありませんでした。 なぜログインしているとすきまができるのかは、不明ですが、運用上の問題は無くなりました。 あらためて、回答頂いた皆さまにお礼申し上げます。