[英]A border of 1px in chrome and 0.8px in firefox?
I gave a border of 1px to a div under chrome. 我给铬下的div设置了1px的边框。 I can get a border of 1px in developer tools, but when I use firefox to view it, it is only 0.8px.
我可以在开发人员工具中得到1px的边框,但是当我使用firefox进行查看时,它只有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;
}
I think this is related to the Windows Display Settings. 我认为这与Windows显示设置有关。 It happens if you have the Windows Display set at 125% instead of 100%.
如果您将Windows Display设置为125%而不是100%,则会发生这种情况。 I had the same problem, changed Windows display to 100% and it was fine.
我遇到了同样的问题,将Windows显示更改为100%,这很好。 As you said, it seems to be a Firefox problem, Chrome is ok.
如您所说,这似乎是Firefox的问题,Chrome还可以。
See also this Firefox Bug Report: https://bugzilla.mozilla.org/show_bug.cgi?id=1427391 另请参阅以下Firefox错误报告: 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. 在这里,他们建议使用
box-sizing: border-box
并将边框宽度包括在元素的宽度中。因此,如果元素为30px,且边框的任一边均为1px,则现在的宽度为32px。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.