Question

我试图用3个点制作一个按钮。虽然它带来了奇怪的问题。当你点击它时，你会注意到一个奇怪的山峰＆＃34;当它处于对焦模式时。

＆＃13;

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

＆＃13;

<button>...</button>

＆＃13;

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>

您似乎还有更多padding，这似乎会导致按钮的内部尺寸不正确以及其他“故障”。仔细检查那些。

Answer 2

你可以使用outline: none，虽然我不确定为什么首先出现“山”。它只发生在Chrome中 - Firefox看起来很好。

按钮轮廓大于按钮尺寸

2 个答案: