css - 按钮轮廓大于按钮尺寸

Question

我试图制作一个带有 3 个点的按钮。虽然它带来了奇怪的问题。当您点击它时，您会在焦点模式下注意到一座奇怪的“山”。

button {
  letter-spacing: 2px;
  padding-top: .4em;
  padding-bottom: .8em;
  line-height: 0;
  font-weight: 800;
  background: black;
  border: 0;
  color: red;
}

<button>...</button>

Jsfiddle

如何删除它或导致它的原因是什么？

Answer 1

“山”之所以存在，是因为font-size的高度比实际按钮的高度大。如果删除文本，您会发现山消失了。

要解决此问题，您只需添加 overflow:hidden 以确保文本不会穿过按钮。

button {
  letter-spacing: 2px;
  padding-top: .4em;
  padding-bottom: .8em;
  line-height: 0;
  font-weight: 800;
  background: black;
  border: 0;
  color: red;
  overflow: hidden;
}

<button>...</button>

您似乎还拥有超过必要的填充，这似乎会导致按钮的负内部尺寸和其他“故障”。仔细检查这些。