CSS跨浏览器缩放不一致求助：三星浏览器正常Chrome移动端显示异常

问题根源 #

你的代码存在几个核心问题，导致Chrome移动端和三星浏览器显示差异：

1. 单位依赖差异：使用em作为布局单位，而em的大小依赖当前元素的字体大小，不同移动端浏览器的默认字体大小可能存在细微差异，直接导致宽度和定位计算偏差。
2. 手动定位误差：topcenter的left: 8.4em是手动估算值，没有考虑元素4px边框的宽度（每个div的总宽度是设置宽度 + 左右边框），不同浏览器下这个估算值和实际所需的定位值不匹配。
3. 缺失视口配置：未添加移动端视口meta标签，导致Chrome和三星浏览器对页面宽度、缩放的计算逻辑不一致。

修复方案 #

1. 添加移动端视口标签 #

首先在HTML的<head>中添加视口配置，确保所有移动端浏览器的页面缩放和宽度计算一致：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 使用Flex布局替代手动定位（推荐） #

放弃每个div单独fixed定位的方式，改用父容器fixed+Flex布局，自动实现三个div并排贴合，彻底避免手动计算的误差：

修改后的HTML结构

<div class="top-wrapper">
  <div class="topleft"></div>
  <div class="topcenter"></div>
  <div class="topright"></div>
</div>

修改后的CSS代码

/* 全局设置border-box，让边框包含在元素宽高内 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.top-wrapper {
  position: fixed;
  top: 3rem;
  left: 0;
  right: 0;
  display: flex;
  gap: 0; /* 消除div之间的间隙，确保完全贴合 */
}

.topleft {
  border: 4px solid black;
  width: 8em;
  height: 10em;
}

.topcenter {
  border: 4px solid black;
  width: 8.5em;
  height: 10em;
}

.topright {
  border: 4px solid black;
  width: 8em;
  height: 10em;
}

3. 保留原有定位方式的修复（不推荐） #

如果一定要保留每个div单独fixed定位，需要修正topcenter的left值，同时统一单位并考虑边框宽度：

* {
  box-sizing: border-box;
}

div.topleft {
  position: fixed;
  left: 0;
  top: 3rem;
  border: 4px solid black;
  width: 8em;
  height: 10em;
}

div.topcenter {
  position: fixed;
  /* 计算left值：topleft的宽度 + 左边框宽度（因为topleft的left是0，边框在外侧） */
  left: calc(8em + 4px);
  top: 3rem;
  border: 4px solid black;
  width: 8.5em;
  height: 10em;
}

div.topright {
  position: fixed;
  right: 0;
  top: 3rem;
  border: 4px solid black;
  width: 8em;
  height: 10em;
}

优化建议 #

• 布局优先使用rem或px单位代替em，em更适合用于字体大小的相对调整，布局用更稳定的单位可减少跨浏览器差异。
• 始终开启box-sizing: border-box，避免边框、内边距干扰元素的宽高计算。
• 尽量使用Flex/Grid等现代布局方式，减少手动定位和计算的需求，提升代码的可维护性和兼容性。

内容的提问来源于stack exchange，提问作者user19659747