html - Chrome 和 Safari 渲染的元素高度差异

Question

在上图中，Chrome 位于左侧，Safari 位于右侧。我的代码中的wrapper（绿色）元素在 Chrome 和 Safari 中以不同的高度呈现。

关于 stackoverflow 的其他类似问题直接指向此stackoverflow question/answer。我应用了那里给出的解决方案，并为所有元素添加了特定的高度并制作了它们display: flex。

我需要做什么才能使wrapper元素在 Chrome 和 Safari 中以相同的高度呈现？

.block, .level-1, .super-wrapper, .wrapper, .wrapper-initial, .initial {
    display: flex;
    justify-content: center;
    align-items: center;
}
.block {
    border: 1px solid #c4c4c4;
    height: 2em;
    width: 4em;
}
.level-1 {
    height: 3em;
}
.super-wrapper {
    height: 3em;
    font-size: 0.4em;
}
.wrapper {
    background-color: #8fbc8f;
    height: 3em;
    width: 3em;
}
.wrapper-initial {
    height: 2em;
}
.initial {
    height: 2em;
}

<div class="block">
    <div class="level-1">
        <div class="super-wrapper">
            <div class="wrapper">
                <div class="wrapper-initial">
                    <div class="initial">X</div>
                </div>
            </div>
        </div>
    </div>
</div>

标签： htmlcss

Answer 1

问题是 Safari 和 Chrome 为您的元素使用不同的字体大小。使用 时em，它会缩放到当前元素的字体大小。

要解决您的问题，请确保元素的字体大小在每个浏览器中都相同，或者rem作为一个单元使用。rem始终使用文档的根字体大小。

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units