Question

我正在使用'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）中，边框大小似乎计算错误 - 边框比其他元素更快/缩小。

http://jsfiddle.net/hXN9p/

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

http://jsfiddle.net/hXN9p/2/

其他Webkit浏览器（即Safari）不会出现此行为，甚至IE8也没有问题。

更新：我设法简化了案例;它与伪元素无关，而与Chrome使用相对单位计算边界宽度的方式有关。这是一个例子;放大和缩小时，两个元素的高度保持不变：

http://jsfiddle.net/W2SdF/

在Chrome中，伪元素的相对边框大小是不可思议的

0 个答案: