[英]A border of 1px in chrome and 0.8px in firefox?
我给铬下的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;
}
我认为这与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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.