html缩放页面导致元素位置变动,在HTML中缩放绝对定位和em大小元素时的布局错位...

我正在创建一个可根据父容器字体大小进行缩放的箭头形状。所以我使用em单位进行扩展。在HTML中缩放绝对定位和em大小元素时的布局错位

当尝试使用Chrome内置变焦功能进行扩展的箭头，或到.container给出不同font-size，有时箭头具有如下图所示的布局错位(注意箭头和冲程之间的小间隙)

普通 缩放：110％

我试图与不同的箭头图案(大小，方向)，并且在器和Firefox不同变焦比偶尔出现类似的问题。我用上面的图像的代码如下：

.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;

}

是否有使用em单元时使得缩放不会产生这种效果，我可以遵循任何准则？

+1

首先，你不应该担心你的页面存在完美的像素在不同的缩放级别超过100％。这就是'zoom'的要点。为了可读性或内容的鸟瞰，您放弃了像素完美性。其次，在'svg'里面的一个'path'中绘制箭头就可以在任何缩放级别清楚地解决你的问题。 –

+0

@AndreiGheorghiu感谢您的快速回复。除了使用内置缩放外，我还尝试给出'.container'不同的'font-size'，并且在'font-size'处出现同样的问题。我认为svg是一个很好的解决方案。但是，这个单元是否应该无所不在地扩展所有的东西呢？ –

+0

'em'根据当前元素的字体大小在整个页面中更改。如果你想有一个通用的相对单位，使用'rem'(root em)。它被''元素的'em'绑定。并且所有的缩放比例将在页面的所有部分成比例，而不管本地的'font-size'。我不确定这是否可以解决您的问题。但它可能。 –