在Safari瀏覽器手機上導致頁面頂部出現空白的CSS問題

瀏覽我的網站的手機版本時，在我的每一頁的頂部都有一個水平的白色條，高度約爲15px。下面是相關的CSS代碼和HTML標記：在Safari瀏覽器手機上導致頁面頂部出現空白的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

只有在Safari移動這個問題？你檢查了其他瀏覽器嗎？ –

我剛剛爲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元素默認邊距引起的。

所有你需要的是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

謝謝Chava G，感謝您對我的問題和您的幫助。我選擇了之前的文章作爲答案，因爲我先閱讀了那篇文章，但我真的很感謝你的幫助。再次感謝。 - 缺口 –

在Safari瀏覽器手機上導致頁面頂部出現空白的CSS問題

回答

相關問題