Safari Mobile（iOS）のページ上部に白いスペースを表示するCSSの問題

ウェブサイトのモバイル版を表示しているときに、マイページの上部に横の白いバーがあります（高さ約15px）。ここでは、関連するCSSコードやHTMLのマークアップは次のとおりです。Safari Mobile（iOS）のページ上部に白いスペースを表示するCSSの問題

body { 
 
    background-color: #FFF; 
 
    font-family: Verdana, Geneva, sans-serif; 
 
    font-size: 16px; 
 
    width: 100%; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    background-color: #FFF; 
 
} 
 

 
#navigation { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    padding: 0px; 
 
    background-color: #009245; 
 
} 
 

 
#content { 
 
    display: block; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    padding: 0px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<body> 
 
    <div id="container"> 
 
    <div id="navigation" class="navigationtext"> 
 
     <h2><a href="">domain</a><br> the home page of First Last</h2> 
 
     <p><a href="/about/">About</a></p> 
 
     <p><a href="/blog/">Blog</a></p> 
 
     <p><a href="/contact/">Contact</a></p> 
 
     <div class="copyright">Copyright</div> 
 
    </div> 
 
    <div id="content"> 
 
     <p>Content/text goes here.</p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

私はCSSプロパティ（主に「マージン」と「パディング」）の多くの組み合わせを試してみましたし、検索に多くの時間を費やしていますウェブ。何も動作していないようです。

何か必要な場合は教えてください。私はこのスレッドを今夜定期的にチェックします。

出典

2017-07-18 N. Scribner

のみサファリの携帯にこの問題ですか？他のブラウザをチェックしましたか？ –

私はiOS用のFirefoxをダウンロードしました（私はそれを意味していました）、この問題がFirefoxにも影響することを確認できます。 –

答えを確認するとお手伝いになるかもしれません.. – LKG

h2margin:0を割り当ててください。 bodymargin:0およびpadding:0である。デフォルトではh2タグはmarginの検査h2タグを持っているためです。

body { 
 
    background-color: #FFF; 
 
    font-family: Verdana, Geneva, sans-serif; 
 
    font-size: 16px; 
 
    width: 100%; 
 
    padding: 0;  /*Added*/ 
 
    margin: 0;  /*Added*/ 
 
} 
 

 
.navigationtext h2 { 
 
    margin: 0px;   /*Added css for h2 tag*/ 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    background-color: #FFF; 
 
} 
 

 
#navigation { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    padding: 0px; 
 
    background-color: #009245; 
 
} 
 

 
#content { 
 
    display: block; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    padding: 0px; 
 
}

<div id="container"> 
 
    <div id="navigation" class="navigationtext"> 
 
    <h2><a href="">domain</a><br> the home page of First Last</h2> 
 
    <p><a href="/about/">About</a></p> 
 
    <p><a href="/blog/">Blog</a></p> 
 
    <p><a href="/contact/">Contact</a></p> 
 
    <div class="copyright">Copyright</div> 
 
    </div> 
 
    <div id="content"> 
 
    <p>Content/text goes here.</p> 
 
    </div> 
 
</div>

出典

2017-07-18 03:10:18 LKG

ありがとう、LKG！私は、利便性を得るために "margin：0px"を割り当てなければなりませんでした（ただし、純粋主義者は、値が0のときに "px"を省略することを好みます）。 –

オハイオ州、はい、私はそれの習慣があります。 – LKG

それはbodyとh2要素のデフォルトの余白に起因しています。

これらの2つの要素に必要なものはすべてmargin-top: 0;です。

body { 
 
    margin-top: 0;   /* Remove top margin from body */ 
 
    background-color: #FFF; 
 
    font-family: Verdana, Geneva, sans-serif; 
 
    font-size: 16px; 
 
    width: 100%; 
 
} 
 

 
.navigationtext h2 { 
 
    margin: 0px; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    background-color: #FFF; 
 
} 
 

 
#navigation { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    padding: 0px; 
 
    background-color: #009245; 
 
} 
 

 
h2 { 
 
    margin-top: 0;   /* Remove top margin from h2 */ 
 
} 
 

 
#content { 
 
    display: block; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    padding: 0px; 
 
}

<div id="container"> 
 
    <div id="navigation" class="navigationtext"> 
 
    <h2><a href="">domain</a><br> the home page of First Last</h2> 
 
    <p><a href="/about/">About</a></p> 
 
    <p><a href="/blog/">Blog</a></p> 
 
    <p><a href="/contact/">Contact</a></p> 
 
    <div class="copyright">Copyright</div> 
 
    </div> 
 
    <div id="content"> 
 
    <p>Content/text goes here.</p> 
 
    </div> 
 
</div>

出典

2017-07-18 03:15:31

私の質問とあなたの助けに興味をお持ちいただきありがとうございます。前の記事を読んだので私は前の投稿を選択しましたが、本当に助けに感謝します。再度、感謝します。 - ニック –

Safari Mobile（iOS）のページ上部に白いスペースを表示するCSSの問題

答えて

関連する問題