在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属性的多种组合（主要是“保证金”和“填充”），并花费了大量的时间搜索网页。似乎没有任何工作。
请让我知道你需要什么。我将在今晚定期检查这个线程。
刚分配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>谢谢，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>谢谢Chava G，感谢您对我的问题和您的帮助。我选择了之前的文章作为答案，因为我先阅读了那篇文章，但我真的很感谢你的帮助。再次感谢。 - 缺口 –
只有在Safari移动这个问题？你检查了其他浏览器吗？ –
我刚刚为iOS下载了Firefox（我一直在这么做），并且可以确认该问题也影响到Firefox。 –
检查答案可能是它会帮助你.. – LKG