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