CSS 在 Safari Mobile 页面顶部导致白色 Space 的问题 (iOS)

Question

在查看我网站的移动版本时，我的每个页面的顶部都有一个大约 15 像素高的水平白条。这是相关的 CSS 代码和 HTML 标记：

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 属性的组合（主要是 "margin" 和 "padding"），并花了很多时间在网上搜索。似乎没有任何效果。

如果您需要什么，请告诉我。我今晚会定期查看此主题。

Answer 1

只需分配 h2 margin:0。在 body margin:0 和 padding:0 中。因为默认情况下 h2 标签有 margin 检查 h2 标签。

.navigationtext h2 {
  margin: 0px;
}

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

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>

Answer 2

这是由 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>

CSS 在 Safari Mobile 页面顶部导致白色 Space 的问题 (iOS)

CSS Issue Causing White Space at Top of Page on Safari Mobile (iOS)

css

mobile-safari

ios