在Chrome中为1像素边框，在Firefox中为0.8像素边框？

Question

我在Chrome中给一个div设置了1px的边框。在开发者工具中，我可以看到1px的边框，但是当我在Firefox中查看时，它只有0.8px。为什么会这样？我感到很奇怪，你能告诉我为什么吗？谢谢。

最初的回答：

<div class="friendHeaderFont">
  <label class="dynamic" :class="{active: isClickDynamic}">hello</label>
  <label class="nearBy" :class="{active: !isClickDynamic}">world</label>
</div>

.friendHeaderFont {
  width: 144px;
  height: 30px;
  position: relative;
  left: calc((100% - 100px) / 2);
  top: 10px;
  transform: translateX(-50%);
  display: inline-block;
  border: 1px solid #DCDCDC; 
  /* box-sizing: border-box; */
  border-radius: 30px;
  color: #DCDCDC;
  white-space: nowrap;
  text-align: center;
  margin-bottom: 20px;
}
.dynamic {
  width: 50%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  line-height: 30px;
}
.nearBy {
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 30px;
}
.active {
  background-color: white;
  color: #DB4139;
  border-radius: 30px;  
}

[1 []2

- DangoSky

---

请查看此链接的内容：这里。 - kukkuz

Answer 1

我认为这与Windows显示设置有关。如果你将Windows显示设置为125%，而不是100%，那么就会出现这种情况。我也遇到了同样的问题，将Windows显示更改为100%后，问题就解决了。正如你所说，这似乎是Firefox的问题，Chrome没有问题。

此外，可以参考Firefox的Bug报告：https://bugzilla.mozilla.org/show_bug.cgi?id=1427391。

在这里，他们建议使用box-sizing: border-box并将边框宽度包含在元素的宽度中。因此，如果元素的宽度为30px，并且两侧各有1px的边框，则现在的宽度为32px。

- Ian

---

现在是2023年，我在Chrome浏览器上遇到了这个确切的问题，所以可以推测这不是一个错误，而是一个特性？让人困惑的是，开发者工具中的单位是什么？因为显然不是逻辑像素，逻辑像素是px单位的意思，那是设备像素吗？有点让人希望他们在这些数字上标明单位。 - undefined