如何解决相同的CSS,相同的页面,不同的渲染 更新1:更新2:
任何人都可以解释以下所示差异的原因吗?
在底部面板中,彩色条比顶部面板更粗。
两者的CSS相同;
.colored-bar {
width: 100%;
height: 2px;
}
浏览器:Chrome 84
请在此处查看实时复制:CodePen
我在CodePen中看到的内容
解决方法
可能您已在浏览器中启用了放大功能。禁用它,一切都应该正确。
125%的放大倍数显示出与屏幕截图完全相同的问题。
更新1:
如果我直接在Windows屏幕设置中将缩放比例设置为125%,也会显示问题。
更新2:
我可能找到了可能的解决方案。只是使用伪元素而不是普通元素,一切似乎都可以正常工作,但是我没有进行广泛的测试。
.kpi {
border: 1px solid black;
height: 56px;
width: 175px;
padding: 10px;
}
.box {
display: flex;
flex-direction: column;
width: 45px;
height: 50px;
text-align: center;
}
.box::after {
content: '';
width: 100%;
border-bottom: 2px solid #0f0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex space-between">
<div class="col d-flex flex-column justify-content-between">
<div class="row kpi mb10 d-flex justify-content-between">
<div class="box">
Test
</div>
<div class="box">
Test
</div>
<div class="box">
Test
</div>
</div>
<div class="row kpi mb10 d-flex justify-content-between">
<div class="box">
Test
</div>
<div class="box">
Test
</div>
<div class="box">
Test
</div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。