分数高度元素与绝对定位的孩子

Question

我尝试使用绝对定位的:before伪元素来设置一些元素的样式。以下是我目前实现这一目标的方式：

.element:before {    
    content: "";
    display: block;
    height: 0;
    width: 0;
    border: 10px solid #ad0c38;
    border-right-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    bottom: 0px;
    right: -20px;
}

问题是，当我有一个包含多个样式的列表的列表，并且元素具有分数高度（例如height:10.3px时，记住您在使用百分比时也可以获得分数），有时效果会向上或向下移动一个像素。你可以在下面的小提琴中看到这个：

JS Fiddle with current Behaviour

是否可以强制元素始终向上（或向下），因此在浏览器对其进行舍入后，我的元素将始终具有相同的像素高度？

Answer 1

在CSS中，使用top: 0;代替bottom: 0;

这是example