Граница 1px в хроме и 0.8px в Firefox?

Question

Я дал границу в 1 пиксель в div под chrome.Я могу получить границу 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

Answer 1

Я думаю, что это связано с настройками дисплея Windows.Это происходит, если у вас установлен Windows Display на 125% вместо 100%.У меня была такая же проблема, изменил отображение Windows на 100%, и это было нормально.Как вы сказали, похоже, это проблема Firefox, с Chrome все в порядке.

См. Также этот отчет об ошибках Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1427391

Здесь они рекомендуют использовать box-sizing: border-box и включатьширина границы в ширину вашего элемента. Так что, если бы элемент был 30px с 1px границей с обеих сторон, то ширина теперь была бы 32px.