时间戳

首页 > 解决方案 > 为什么我在某些浏览器中的元素上出现滚动条？

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

问题描述

我有一个标题元素，包含一个徽标（向左浮动）和另一个 div（向右浮动）和一个隐藏的导航元素。在旧 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>

标签： htmlcss

解决方案

如https://www.w3schools.com/howto/howto_css_clearfix.asp中所述，请勿overflow: auto用于 clearfix。换一种方式试试。

推荐阅读