1

我正在使用“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/

4

0 回答 0