时间戳

首页 > 解决方案 > chrome的1px边框和firefox的0.8px边框？

html - chrome的1px边框和firefox的0.8px边框？

问题描述

我给 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

标签： htmlcssgoogle-chromefirefox

解决方案

我认为这与 Windows 显示设置有关。如果您将 Windows 显示设置为 125% 而不是 100%，则会发生这种情况。我有同样的问题，将 Windows 显示更改为 100%，这很好。正如你所说，这似乎是一个Firefox的问题，Chrome是好的。

另请参阅此 Firefox 错误报告：https ://bugzilla.mozilla.org/show_bug.cgi?id=1427391

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

推荐阅读