A border of 1px in chrome and 0.8px in firefox?

Question

I gave a border of 1px to a div under chrome. I can get a border of 1px in developer tools, but when I use firefox to view it, it is only 0.8px. Why? I feel very strange, can you tell me why? Thank you.

<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

I think this is related to the Windows Display Settings. It happens if you have the Windows Display set at 125% instead of 100%. I had the same problem, changed Windows display to 100% and it was fine. As you said, it seems to be a Firefox problem, Chrome is ok.

See also this Firefox Bug Report: https://bugzilla.mozilla.org/show_bug.cgi?id=1427391

On here, they recommend using box-sizing: border-box and including the border width in the width of your element.So if the element was 30px with 1px border either side then the width would be 32px now.