嘿，我之前也碰到过类似的移动端样式跑偏问题，大概率是移动端浏览器的默认行为或者CSS定位方式的兼容性搞的鬼！咱们一步步来排查和修复：

问题根源分析 #

你用margin-top: -110px来让图标一半露出容器外，这种方式在桌面和Chrome模拟器里正常，但真实移动端出错，通常有这几个原因：

• 没有设置正确的视口标签，导致移动端浏览器自动缩放页面，打乱了你的尺寸计算
• margin负值的偏移容易受到元素折叠、容器渲染顺序的影响，移动端浏览器的渲染机制和桌面有差异
• rem单位如果没有固定根字体大小，不同设备的实际换算值会不一样，导致容器内边距和偏移量不匹配

修复方案 #

1. 先加正确的视口meta标签 #

这是移动端样式正常显示的基础！在你的HTML头部加上：

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

它会强制浏览器使用设备的实际宽度渲染页面，避免自动缩放导致的尺寸错乱。

2. 改用更稳定的绝对定位方式 #

把margin偏移换成绝对定位，配合父容器的相对定位，让图标位置更可靠：

修改你的CSS代码：

.stats-container {
  padding: 5rem;
  background: white;
  box-shadow: 0px 20px 100px rgba(2, 2, 3, 0.1);
  border-radius: 5px;
  text-align: center;
  position: relative; /* 新增：作为绝对定位的参考容器 */
}

.flag {
  position: absolute;
  top: -35px; /* 图标max-width是70px，假设是正方形，往上移一半高度就能露出一半 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中，和容器的text-align效果一致 */
}

.flag img {
  max-width: 70px;
  /* 删掉原来的margin-top: -110px; */
}

这种方式的好处是：图标定位完全基于父容器，不会受其他元素的布局影响，兼容性覆盖几乎所有移动端浏览器。

3. 固定根字体大小（可选但推荐） #

如果你的页面用了rem单位，给根元素设置固定的字体大小，避免不同设备自动调整：

html {
  font-size: 16px; /* 固定根字体，让rem换算更稳定 */
}

4. 清理移动端缓存 #

测试前记得清空手机浏览器的缓存，有时候旧的CSS缓存会导致样式不更新，白忙活一场！

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