「CSS 三角形」(疑似要素の境界線のサイズ/色が異なる) を使用して、Web ページの要素に矢印のような外観を与えています。ユーザー エージェント スタイルシートにデフォルト以外のフォント サイズがある場合に、必要に応じてスケーリングされるように、相対単位を使用してすべてのサイズを調整します。
.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 が相対単位でボーダー幅を計算する方法と関係があります。以下に例を示します。ズームインおよびズームアウトすると、2 つの要素は同じ高さではなくなります。