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 不同，且未显式声明时，各浏览器对 <button> 的默认字体继承策略也存在差异（例如是否继承父级 font-size、是否应用 UA 样式重置等）。
✅ 正确解法：强制标准化基础字体环境
在根元素或按钮祖先节点上显式设置 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。
