0
における絶対位置し、全角サイズの要素をスケーリングするとき、私は親コンテナのフォントサイズに応じて拡張することができます矢印の形を作成しています。だから、スケーラビリティのためにemユニットを使用します。レイアウト紛失HTML
Iは以下に示すように、時には矢印レイアウト置き忘れを有し、クロム組み込みズーム機能を使用して、矢印をスケーリング、または.containerに異なるfont-sizeを与えることを試みる（矢印とストロークの間に少し隙間を注意）
正常
ズーム：110％
Iは異なる矢印パターン（大きさ、方向）と試みており、同様の問題は、ChromeとFirefoxの両方で異なるズーム比で時折発生します。私は上の画像のために使用されるコードは次の通りである：
<html>
<head>
<style>
.container {
position: relative;
margin: 3em;
}
.arrow-left {
position: absolute;
top: 0;
left: -2em;
border: 2em solid transparent;
border-right: 2em solid #333;
width: 0;
height: 0;
}
.stroke {
position: absolute;
top: 1em;
left: 2em;
width: 5em;
height: 2em;
background-color: #333;
}
</style>
</head>
<body>
<div class="container">
<div class="arrow-left"></div>
<div class="stroke" style=""></div>
</div>
</body>
</html>
はemユニットを使用するときのスケーリングは、この効果を生じないように、私は従うことができます任意のガイドラインはありますか？
まず、あなたのページビーイングピクセル完璧100％とは異なるズームレベルで心配してはいけません。それが 'zoom'のポイントです。読みやすさやコンテンツの鳥瞰図をピクセル単位で完全に捨ててしまいます。第二に、 'svg'の中の一つの' path'に矢印を描くことは、どのズームレベルでもあなたの問題をはっきりと解決します。 –
@AndreiGheorghiuご返信ありがとうございます。組み込みのズームを使用する以外は、 '.container'に' font-size'とは違うものを与えようとします。同じ問題が 'font-size'で発生します。私はsvgが形状の良い解決策だと思います。しかし、これは、 'em'ユニットがすべてのものをいたるところに拡大することになっているので、これは奇妙な動作ではありませんか？ –
現在の要素のフォントサイズに応じて、ページ全体で 'em 'が変化します。一般的な相対単位を使用する場合は、 'rem'（root em）を使用します。それは '
'要素の 'em 'に束縛されています。そして、あなたの 'zoom'sはすべて、ローカル' font-size'にかかわらず、ページのすべての部分で比例します。私はこれがあなたの問題を解決するかどうかはわかりません。しかし、それは可能性があります。 –