dポイントプレゼントキャンペーン実施中！

chromeだけbody直下に空白が開く

締切済

  • 質問者：Y-oTo-Y
  • 質問日時：
  • 回答数：7件

ワードプレスを使い、サイトを構築中です。

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;

}
-----------------------------


参考の画像も添付しますのでよろしくお願いします。

「chromeだけbody直下に空白が開く」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.7

  • 回答者： naokita
  • 回答日時：

Choromeのレンチマーク（設定）から


ツール　→　デベロッパーツール　にて、

body もしくは、
body直下の div の CSS styleを見れば一目瞭然では？
CSS適応のチェックボックスをONやOFFにしてみるとか。
    • good
    • 0
    • 件
通報する
この回答へのお礼

デベロッパーツール初めて知りました。私の知識ではいまいち理解できない部分もありましたが、勉強になりました。

さて、自分なりにいろいろ試したところ、とりあえず解決いたしましたので報告します。

結論：ログイン状態だとすきまができる。ie、Firefox、Safariも同様にすきまができる。
　　　ログアウトすれば、すきまが無くなる。

chromeのみログインしていましたので、このような質問タイトルになりましたが、原因はchromeではありませんでした。

なぜログインしているとすきまができるのかは、不明ですが、運用上の問題は無くなりました。

あらためて、回答頂いた皆さまにお礼申し上げます。

通報する
お礼日時：2011/06/11 08:10

No.6

  • 回答者： ORUKA1951
  • 回答日時：

div{border:solid 1px gray;}


だと？？？
    • good
    • 0
    • 件
通報する
この回答へのお礼

解決しました。

詳しくは、最終の回答のお礼欄に記載します。

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

通報する
お礼日時：2011/06/11 07:59

No.5

こんばんは。

コードをコピペ試してみましたが、私の環境ではwin, mac 共にchromeで問題なく（隙間なく）表示されています（background 画像はないので、こちらの手元にあるものを使いました）。

試しに、Firefox、Opera、Safariでも試しましたが、上記のコードであれば、すべて同じ見え方（隙間なし）で表示されています。

もしかしたら、開示されたＣＳＳ以外の何かが影響しているのかもしれませんが、そうなると原因は多岐に渡るので一概に何だとは言えなくなるかもしれませんね。

解決にはなりませんが、貼りつけてあるコードは、少なくとも私の環境では問題ないということは報告しておきます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

解決しました。

詳しくは、最終の回答のお礼欄に記載します。

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

通報する
お礼日時：2011/06/11 07:58

No.4

  • 回答者： sora1tora2
  • 回答日時：

こんにちは



CSSリセットは試されましたか？

一番簡単なやり方は

*{
margin: 0;
padding: 0;
}

ただ、このやり方だと意図しない要素もリセットされてしまう

という理由で今はあまり使われていませんが。

参考になればよいのですが。
    • good
    • 0
    • 件
通報する
この回答へのお礼

解決しました。

詳しくは、最終の回答のお礼欄に記載します。

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

通報する
お礼日時：2011/06/11 07:58

No.3

  • 回答者： 4017B
  • 回答日時：

例文のHTMLとCSSのみでは、自分の環境下（Chrome 11.0.696.71）では正常に。

つまり上部に隙間無く表示されます。なので、何かそれ以外の他の部分のCSSなり、HTMLが影響してるんじゃないでしょうか？

また、基本的に Safari と Chrome は、同じWebkitエンジンを使用していますので。極端に違った表示のされ方はしないので。Safariで問題無く、Chromeだけ可笑しいというのなら、問題は何かChrome側にあるかもしれません（何か個別の拡張機能とか？）。
    • good
    • 0
    • 件
通報する
この回答へのお礼

解決しました。

詳しくは、最終の回答のお礼欄に記載します。

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

通報する
お礼日時：2011/06/11 07:58

No.2

  • 回答者： ORUKA1951
  • 回答日時：

XHTMLかな


CSSの最初に
html,body{margin:0;padding:0;}
と書いておく・・・

この回答への補足

試しましたがだめでした。

引き続き情報よろしくお願いします。

補足日時：2011/06/02 18:38
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

決しました。

詳しくは、最終の回答のお礼欄に記載します。

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

通報する
お礼日時：2011/06/11 07:57

No.1

  • 回答者： t_ohta
  • 回答日時：

cssに以下の内容を入れてみたら変わりませんでしょうか。


WordPressバージョンが分からないので適切かは分かりませんが、ちょっとまえのバージョンアップでWordPressがデフォルト指定しているスタイルのせいで隙間が出るようになった事がありましたが、その時はオリジナルのcssに以下の記述を加えたら隙間が出なくなりました。

html { margin: 0px !important; }

この回答への補足

試しましたが、だめでした。

ワードプレスのバージョンですが、昨日3.1.0から3.1.3にアップデートしたところなのですが、
3.1.0、3.1.3ともに同じ症状です。

補足日時：2011/06/02 18:33
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

解決しました。

詳しくは、最終の回答のお礼欄に記載します。

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

通報する
お礼日時：2011/06/11 07:57

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報