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

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

普通PfUfs.jpg 缩放:110%HuRb9.jpg

我试图与不同的箭头图案(大小,方向),并且在器和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'。我不确定这是否可以解决您的问题。但它可能。 –

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐