网页中按钮的奇怪突出显示

【问题标题】：Strange highlight of a button in webpage网页中按钮的奇怪突出显示
【发布时间】：2022-01-27 04:04:44
【问题描述】：

我尝试为网站设置样式，当我按 TAB 键浏览按钮时，出现了一个奇怪的亮点。它应该只是按钮的边框，但在提供的图像中它看起来不是那样的。如果你能告诉我原因，我会很高兴。这是代码/设计的 css 和 html 图像。

.pagination-buttons {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translate(-50%, 0);
}

.pagbut {
  background-color: white;
  width: 16px;
  height: 8px;
  border: 1px solid #06d6a0;
  border-radius: 100px;
  cursor: pointer;
}

.button-fill {
  background-color: #06d6a0;
}

      <div class="pagination-buttons pagi-design">
        <button class="pagbut">&nbsp;</button>
        <button class="pagbut button-fill">&nbsp;</button>
        <button class="pagbut">&nbsp;</button>
        <button class="pagbut">&nbsp;</button>
      </div>

【问题讨论】：

标签： html css web button

【解决方案1】：

这是因为&nbsp; 渲染了一个空间，这个空间也有一个你看不到的高度。

所以当你选择按钮的时候，你也选择了里面的文字。

解决您的问题的两种方法：删除空格（就像我对第一个按钮所做的那样）或将overflow: hidden 设置为按钮，这样文本就不会溢出容器。

.pagination-buttons {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translate(-50%, 0);
}

.pagbut {
  background-color: white;
  width: 16px;
  height: 8px;
  border: 1px solid #06d6a0;
  border-radius: 100px;
  cursor: pointer;
  overflow: hidden;
}

.button-fill {
  background-color: #06d6a0;
}

<div class="pagination-buttons pagi-design">
        <button class="pagbut"></button>
        <button class="pagbut button-fill">&nbsp;</button>
        <button class="pagbut">&nbsp;</button>
        <button class="pagbut">&nbsp;</button>
      </div>

【讨论】：