在firefox

Question

页面的某些部分在firefox中看起来与chrome不同。 这就是它在chrome中的样子：

这就是firefox中的样子：

HTML code：

＆＃13;

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  margin-top: 0;
  padding-top: 0;
  overflow-x: hidden;
}
@media print {
  body {
    margin-top: 0 !important;
  }
}
body {
  background-color: white;
  color: black;
  padding: 0;
  margin: 0;
  min-height: 100%;
  min-width: 100%;
  overflow-x: hidden;
}
.rowa {
  padding: 10px;
  background-color: black;
  color: white;
  height: 100%;
  margin: 0;
}
#title {
  font-size: 36px;
  display: inline-block;
  color: white;
}

＆＃13;

<nav class="navbar navbar-inverse " id="navtop">
  <div class="container-fluid rowa">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#" id="title">title</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right  menu " id="menu1">
        <li><a href="#" id="home1"> Home</a>
        </li>
        <li><a href="#" id="book"> Booking</a>
        </li>
        <li><a href="#" id="rate">Rates</a>
        </li>
        <li><a href="#" id="abt"> About us</a>
        </li>
        <li><a href="#" id="contact"> Contact us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

我无法从顶部和导航栏中的额外填充中删除额外的空间。

我已经为html和body在css中设置了margin和padding为0，min-width和min-height为100％。

此外，firefox中的图像和表单之间还有额外的间距（适用于小屏幕设备）。

如何摆脱Firefox中的这些额外空间？请帮忙。

Answer 1

使用CSS中的高度规则调整为 id =“menu1”。