Chrome边框为1px,Firefox边框为0.8px?

时间:2019-02-22 17:37:38

标签: html css google-chrome firefox

我在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;  
}

[enter image description here 1 [enter image description here] 2

1 个答案:

答案 0 :(得分:1)

我认为这与Windows显示设置有关。如果您将Windows Display设置为125%而不是100%,则会发生这种情况。我遇到了同样的问题,将Windows显示更改为100%,这很好。正如您所说,这似乎是Firefox问题,Chrome还可以。

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

在这里,他们建议使用SQL> with test (brand, result, year_month) as 2 (select 'nike', 200, '2018-01' from dual union all 3 select 'nike', 200, '2018-02' from dual union all 4 select 'nike', 200, '2018-03' from dual union all 5 select 'nike', 50 , '2018-04' from dual 6 ) 7 select brand, 8 first_value (result) over (partition by brand order by year_month desc) result, 9 year_month 10 from test 11 order by year_month ; BRAN RESULT YEAR_MO ---- ---------- ------- nike 50 2018-01 nike 50 2018-02 nike 50 2018-03 nike 50 2018-04 SQL> 并在元素的宽度中包括边框宽度。因此,如果元素为30px,两边各有1px边框,则现在的宽度为32px。