为什么在某些浏览器中的元素上会出现滚动条？

Question

我有一个header元素，其中包含徽标（左浮动）和另一个div（右浮动）以及一个隐藏的nav元素。在较旧PC的open_menu div上，我得到了垂直滚动条。好像一两个像素不合适。好像子div open_menu的高度大于其父头的高度，这就是出现滚动条的原因。但这不是事实，为什么会这样？

HTML和CSS：

header {
  line-height: 71px;
  border-bottom: 1px solid;
  overflow: auto;
}

.logo {
  float: left;
  width: 137px;
  height: 71px;
}

.open_menu {
  float: right;
  font-size: 22px;
  cursor: pointer;
}

nav {
  display: none;
  position: absolute;
  top: 72px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 102;
}

<header>
  <div class="logo">
    <a href="index.html"><img src="resources/logo.svg" alt="xyz"></a>
  </div>
  <div class="open_menu" onclick="myFunction()">Menu</div>
  <nav>
    <ul>
      <li><a href="work.html">Work</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

Answer 1

如https://www.w3schools.com/howto/howto_css_clearfix.asp中所述，请勿将overflow: auto用于clearfix。尝试其他方式。

Answer 2

解决方案是将line-height从header移到子div（open_menu）。因此，标题的高度由子div确定。