在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问题

回答

相关问题