解决方案

Question

在CSS中：

.dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50%;
}

在html中：

<button type="button" class="dot"></button>

在浏览器中（说出16像素，当我展开查看为什么只显示9像素时）：

经过IE和Chrome测试，均为16x9px。

如果我将宽度和高度设置为15x15像素，那么看起来就很好（即使没有！important）。

如果我将宽度和高度设置为10，则其在浏览器中为16x10px。

我还尝试将宽度，最大宽度，最小宽度（和高度）设置为9px！重要的还是16x9px。

Answer 1

您应该熟悉box-sizing属性，该属性确定宽度和高度的计算方式，在Chrome中，在按钮上设置的box-sizing的默认值为border-box

border-box：width和height属性包括内容，填充和边框

现在让我们谈谈您的情况：

内容：

<button type="button" class="dot"></button>

该按钮没有文字，表示其内容的宽度为0px

填充：

用户代理所应用的按钮（在这种情况下为Chrome）上的默认padding为

padding-top: 1px;
padding-right: 6px;
padding-bottom: 1px;
padding-left: 6px;

边界：

我们只关心边框的宽度

用户代理所应用的按钮（在这种情况下为Chrome）上的默认border为

border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;

我们将仅讨论宽度，因为高度几乎相同

在不应用任何样式的情况下，让我们总结一下

left border 2px + left padding 6px + content 0px + right padding 6px + right border 2px

因此，默认情况下，按钮的整体宽度为16像素。

现在，当您说width:9px时，您明确设置了border+padding+content所在的宽度，但是它们的宽度较宽，因此会扩展。

为什么它不会在15x15像素上发生。（变成16x15，就好像它有填充要填充到16px上

这是因为16px是border+padding+content需要居住的确切空间，这就是为什么看不到变化的原因。

现在，如果将宽度设置为比16px宽，则内容的宽度将发生变化，因为边框将获得设置宽度border property和填充宽度padding属性。

因此，要解决此问题，我们需要重置那些预定义的样式padding和border

console.log(document.querySelector('button').getBoundingClientRect().width)

button {
  width: 9px;
  padding: 0;
  border:none;
}

<button></button>