safari 浏览器对相对单位（如 em、rem）的解析与 chrome 存在差异，尤其在伪元素结合 transform 定位 tooltip 时易出现错位；统一基础字体大小和字体族是解决跨浏览器定位不一致的关键。
在使用 ::before 和 ::after 伪元素构建纯 css 悬停提示框（tooltip）时，开发者常依赖 transform: translate(X%, Y%) 进行精确定位。然而，该方案在 safari 中往往失效——即使添加了 -webkit-transform 前缀，tooltip 仍可能严重偏移或完全脱离预期位置。
根本原因在于：translate() 中使用的百分比值（如 translate(-105%, 150%)）是相对于元素自身的宽高计算的，而元素宽高又受 font-size 影响（尤其是当 padding、width 使用 em 单位时）。Safari 默认的 font-size 渲染行为与 Chrome 不同，且未显式声明时，各浏览器对
✅ 正确解法：强制标准化基础字体环境
在根元素或按钮祖先节点上显式设置 font-size，并统一 font-family，确保所有浏览器基于相同基准计算相对单位：
/* 推荐：全局重置基础字体（可放入 reset 或 base.css） */ html { font-size: 16px; /* 固定基准，避免 Safari 动态缩放干扰 */ font-family: -apple-system, BlinkmacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* 或仅作用于 tooltip 区域 */ .buttonhover { position: relative; margin-top: 5em; margin-left: 5em; font-size: 16px; /* 关键！为 .button 提供稳定 font-size 上下文 */ }同时，优化 tooltip 定位逻辑，避免过度依赖百分比 translate。更健壮的做法是结合 top/left 与 transform 微调，并用 transform-origin 明确参考点：
.button::before, .button::after { position: absolute; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; /* 移除冗余的 -webkit-position（无效属性） */ } .button::before { content: ""; border-width: 0 8px 10px 8px; border-style: solid; border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent; top: 100%; /* 先用绝对定位锚定到按钮底部 */ left: 50%; transform: translateX(-50%) translateY(4px); /* 精确微调：水平居中 + 向下偏移 */ } .button::after { content: attr(data-button); padding: 0.5em 0.7em; background-color: rgba(0, 0, 0, 0.8); color: white; border-radius: 0.4em; top: 100%; left: 50%; transform: translateX(-50%) translateY(16px); /* 与三角箭头保持合理间距 */ white-space: nowrap; } .button:hover::before, .button:hover::after { opacity: 1; }⚠️ 注意事项：
- 不要使用 transform: translate(X%, Y%) 中过大的百分比值（如 450%），这极易因容器尺寸计算差异导致 Safari 偏移；
- 避免在 .button 上设置 font-size: inherit 或未声明 font-size，务必显式指定；
- Safari 对 pointer-events: none 在伪元素上的支持稳定，但需确保父元素无 overflow: hidden 裁剪 tooltip 区域；
- 如需更高兼容性，可考虑用 position: fixed + javaScript 动态计算位置，但纯 CSS 方案在标准化字体后已足够可靠。
通过统一字体基准 + 基于 top/left 的锚点定位 + transform 微调，即可实现 Chrome、Safari、firefox 三端一致的 tooltip 行为——无需 javascript，也无需浏览器特异性 hack。