悬停时如何关闭底部的3px间隙？ [重复]

Question

这个问题在这里已有答案：

• Get rid of space underneath inline-block image [duplicate] 2回答

我一直在努力解决一个问题，即我的按钮没有拉伸父div的整个高度。当我将鼠标悬停在按钮上时，从我的按钮底部到父div底部有一个~3px的间隙。

我把我的整个代码分解为这里的小代码，问题仍然存在。如果我在float: left;，#main_buttons和#header_big上使用.buttons，问题就消失了。但是，如果我在#main_buttons上使用float，#header_big我的整个网站崩溃了，所以这不是一个修复，没有我不得不重新编码网站的其余部分。还有其他解决方案吗？ https://jsfiddle.net/ewktoqrL/

#header_big {
  background-color: #cccccc;
  min-width: 100%;
  min-height: 100%;
  float: left;
}

#main_buttons {
  min-height: 100%;
  float: left;
}

.buttons {
  max-height: 100%;
  float: left;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 12px;
  padding-top: 14px;
}

.buttons:hover {
  background-color: #efefef;
}


<div id="header_big">
  <div id="main_buttons">
    <div id="home" class="buttons">
      Home
    </div>
    <div id="cv" class="buttons">
      CV
    </div>
    <div id="nyheter" class="buttons">
      Nyheter
    </div>
    <div id="movie" class="buttons">
      Film
    </div>
    <div id="games" class="buttons">
      Spill
    </div>
    <div id="music" class="buttons">
      Musikk
    </div>   
  </div>
</div>

Answer 1

我只想在你的margin-bottom: -3px;上添加.buttons。我认为这将解决你的问题。但是，我不确定问题出在哪里。我认为它可能来自于.buttons的填充物。