Question

我正在为我的网站制作菜单，我隐藏了溢出，所以边框高度不会比菜单大，但过了一段时间后我需要摆脱overflow:hidden选项。

摆脱参数后，底部出现两倍高的边框。

这是我用于导航器菜单上按钮的相关样式：

.Button {
  display: block;
  font-size: 10pt;
  float: left;
  right: 15%;
  left: 30%;
  top: 0%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  width: 7%;
  font-family: sans-serif;
  height: 0%;
  padding: 25px 2px 55px 2px;
  vertical-align: center;
  text-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 100px;
  transition: 0.1s ease-in;
}

我尝试no-repeat选项没有成功，之后边界会完全消失。

之后，我尝试将padding-bottom值设置为0，但未进行更改。

box-sizing设置为border-box：

*,
*::before,
*::after {
  box-sizing: border-box;
}

我也尝试将高度值设置为0，这也没有任何改变。

Fiddle.（个人资料图片是示例，所以不是问题）。

那么问题是什么呢？如何在不隐藏菜单溢出的情况下摆脱它？我有不正确的锚标签吗？

Answer 1

好的伙计！

尝试检查你有的填充但是在按钮＆amp;您可以尝试通过以下方式更改高度：

“身高：10px！important;”

Answer 2

尝试box-sizing: border-box，它不允许填充增加元素的尺寸

CSS：border比div容器高

2 个答案: