【问题标题】: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;
}
<button>...</button>

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;
    }
    <button>...</button>

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

    【讨论】:

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

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

    【讨论】:

    • 不要删除轮廓,这是可访问性的关键功能。
    • 进一步了解 Roy 的评论,您可以删除 outline,但如果您这样做,您确实应该用另一个视觉提示替换该轮廓以显示该元素已聚焦(无论是使用background-colorborder-colorbox-shadow...)对于非鼠标用户来说,确实必须有一些东西来识别页面上的哪个元素被聚焦。
    猜你喜欢
    • 2021-01-05
    • 1970-01-01
    • 2019-07-08
    • 1970-01-01
    • 2011-03-12
    • 2019-02-04
    • 2021-07-09
    • 1970-01-01
    • 2015-06-09
    相关资源
    最近更新 更多