我创建了小片段来说明问题。
我svg在<i>标签内有一个图标。这是我的图标的基本块，放置在我整个页面的各个位置。为了这个例子，我把它放在一个简单的 div 容器中。
如果您检查下面示例的结果，您会发现<i>标签的高度与预期33px不符30px。我的问题是为什么会发生这种情况以及如何预防？
.container {
font-size: 30px;
}
.icon {
line-height: 1;
}
.icon svg {
height: 1em;
width: 1em;
}<div class="container">
<i class="icon">
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /></svg>
</i>
</div>