safari 对 `transform` 和相对单位（如 `%`）的解析与 chrome 存在差异，导致伪元素 tooltip 定位错乱；根本解决方法是统一基础字体尺寸，并避免依赖不可靠的百分比位移。
在使用 ::before 和 ::after 构建悬停 tooltip 时，开发者常倾向于用 transform: translate(X%, Y%) 实现动态定位。但问题在于：CSS 中的百分比位移（如 translate(450%, 330%)）在 Safari 中是相对于元素自身的宽高计算的，而该元素（——尤其当未显式设置 font-size 或 font-family 时，Safari 可能采用更保守的字体回退策略，导致 em/% 基准偏移，最终使 translate() 的像素结果严重失准。
✅ 正确做法是：
- 显式声明 font-size 和 font-family（哪怕只是继承自 body），确保所有浏览器拥有统一的排版基准；
- 改用 px、rem 或 em（基于根字体）等确定性单位定位伪元素，而非依赖 translate(X%, Y%)；
- 将 tooltip 的定位逻辑从 transform 转向 top/left + position: absolute 配合 transform: translate() 仅作微调（如居中对齐），这样更可控。
以下是优化后的可靠实现示例：
.buttonhover {
position: relative;
margin-top: 5em;
margin-left: 5em;
}
.button {
padding: 0.5em 1em;
background-color: coral;
border: none;
border-radius: 0.3em;
/* ? 关键：强制统一字体基准 */
font-size: 16px; /* 避免浏览器默认值差异 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* ? 可选：重置 line-height 防止高度波动 */
line-height: 1.2;
}
.button::before,
.button::after {
content: "";
position: absolute;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 1000;
}
/* 三角形箭头：使用绝对定位 + px 偏移，稳定可靠 */
.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%); /* 水平居中，安全且跨浏览器一致 */
margin-top: -2px; /* 微调与 tooltip 的衔接 */
}
/* 文字气泡：同样使用绝对定位 + px 偏移 */
.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%);
margin-top: 8px; /* 箭头与气泡间距 */
white-space: nowrap;
font-size: 0.875rem;
}
.button:hover::before,
.button:hover::after {
opacity: 1;
}⚠️ 注意事项：
- 不要再使用 translate(X%, Y%) 作为主定位手段（如原代码中的 translate(450%, 330%)），它在 Safari 中极易失效；
- transform: translateX(-50%) 是安全的，因为它只做水平居中，不依赖父容器或自身尺寸的模糊百分比；
- 若需支持多行 tooltip，请改用 max-width + word-wrap，并配合 top/left 动态计算（建议结合 JS，或改用现代方案如 :has() + CSS 变量）；
- Safari 16.4+ 已大幅改善伪元素定位一致性，但仍建议保持上述防御性写法以兼容旧版本。
总结：跨浏览器 tooltip 的稳定性不取决于加多少 -webkit- 前缀，而在于控制变量——统一字体、避免歧义单位、用确定性定位替代“魔法百分比”。这才是真正可维护、可复用的前端实践。
