Html 在Chrome中，伪元素的相对边框大小不稳定

我在一个伪元素上使用不同边框大小/颜色的“CSS三角形”，为网页上的元素提供箭头般的外观。我使用相对单位来调整所有内容的大小，这样当用户代理样式表具有非默认字体大小时，它们就可以按应有的比例进行缩放

.arrow {
    line-height: 1.5em;
    padding: 0 0.5em;
    background-color: rgb(255, 165, 0);
    display: inline-block;
    position: relative;
}

.arrow:after {
    content: " ";
    display: block;
    position: absolute;
    box-sizing: border-box; /* all positioning/size units should line up with the
                               outside of the border */
    top: 0; /* align triangle with top of container */
    left: 100%; /* push triangle to right of container */
    border-style: solid;
    border-color: rgba(255, 66, 0, 0); /* transparent */
    border-width: 0.75em; 
    border-left-color: rgb(255, 66, 0); /* here's where the triangle is created */
}

这一切都很好，除了在Chrome当前使用的23版中，当我放大和缩小时，边框大小的计算似乎不正确-边框的增长/收缩速度比其他元素快得多

如果我使用绝对单位，问题就会消失，但我不想使用绝对单位：

其他Webkit浏览器，如Safari，没有表现出这种行为，甚至IE8也没有问题

更新：我已经设法简化了案件；它与伪元素无关，与Chrome使用相对单位计算边框宽度的方式有关。这里有一个例子；放大和缩小时，两个图元的高度不再相同：