按钮轮廓大于按钮尺寸答案

【问题标题】：Button outline is larger than button dimensions按钮轮廓大于按钮尺寸
【发布时间】：2016-10-29 11:45:25
【问题描述】：

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

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

&lt;button&gt;...&lt;/button&gt;

Jsfiddle

我该如何移除它或者是什么原因造成的？

【问题讨论】：

标签： css

【解决方案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;
}

&lt;button&gt;...&lt;/button&gt;

您的padding 似乎也超出了必要的数量，这似乎会导致您的按钮内部尺寸为负数以及其他“故障”。仔细检查那些。

【讨论】：

谢谢，没想到它可能是字体大小，这让我发疯了，因为它似乎不是一个需要解决的复杂问题，但仍然......@_ @
和填充的东西，我这样做是因为正常情况下没有在顶部和底部使用 line-height:0; 填充，两边不相等。 jsfiddle.net/c1v634rb/1这个例子中的点在底部
@Harugawa 这里的实际问题是... 是一组在行底部对齐的符号——而不是在中间（例如-）。要解决此问题，您可以使用:after 或:before 伪类，它们在对齐项目时提供了额外的选项。 Here 是一个固定尺寸的演示，包括良好的填充。这里的关键是文本... 不比它需要的大，所以没有“推送” - 因为我已经强制设置了一个 height 。

【解决方案2】：

您可以使用outline: none，尽管我不确定为什么“山”首先会出现。但它只发生在 Chrome 中 - Firefox 似乎很好。

【讨论】：

不要删除轮廓，这是可访问性的关键功能。
进一步了解 Roy 的评论，您可以删除 outline，但如果您这样做，您确实应该用另一个视觉提示替换该轮廓以显示该元素已聚焦（无论是使用background-color、border-color、box-shadow...）对于非鼠标用户来说，确实必须有一些东西来识别页面上的哪个元素被聚焦。