如何实现精确的CSS渲染？

Question

我有一个具有原始样式的div

display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 16px;
height: 16px;
box-sizing: border-box;
border: solid 1px #cfcfcf;

和上面的:after伪元素

content: '';
display: flex;
width: 14px;
height: 14px;
background: #3fcaca;
border-radius: 50%;

但是这些div在不同的屏幕区域看起来不同。浏览器缩放为100％

我正在使用15英寸全高清屏幕以及Windows放大功能，这显然是原因。是否可以通过一些CSS调整来解决这些问题？

Answer 1

如果要使元素顶部的元素与:after（或before:）对齐，请将父元素设置为position: relative;，然后将:after设置为{{ 1}}，然后调整position: absolute;，top:，使内容对齐。