html - Chrome 和 Safari 渲染的元素高度差异
问题描述
在上图中,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>
解决方案
问题是 Safari 和 Chrome 为您的元素使用不同的字体大小。使用 时em
,它会缩放到当前元素的字体大小。
要解决您的问题,请确保元素的字体大小在每个浏览器中都相同,或者rem
作为一个单元使用。rem
始终使用文档的根字体大小。
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
推荐阅读
- tensorflow - 获取特定层的输出作为测试数据的结果,而不是 keras 中的最后一层(自动编码器潜在特征)
- image - 从子文件夹中提取 .jpeg 文件并使用 SSIS 将它们放在另一个文件夹中
- react-native - 我们什么时候应该在 React Native 中使用 `accessibilityRole`?
- angular - rxJs 三个 observables,前两个响应作为第三个的参数
- r - 如何使用 ggplot2 更改堆叠条形图的顺序和配色方案?
- c# - 在 ApplicationUser 中保持用户锁定状态的最佳方法是什么?
- karate - 在空手道框架中执行排序时出现 def 变量问题
- c++ - 如何让编译器读取下载的库?
- typescript - TypeScript - 如何设计一个动态呈现另一个类特征的类型类?
- excel - 点击用户表单中的提交以在下一行填写数据