伪元素定位参考最近的已定位祖先（position为relative/absolute/fixed/sticky），而非直接父元素；Safari中tr设relative时::after仍可能相对于table定位，因WebKit对表格定位支持有限。
伪元素定位参考的是哪个祖先？
伪元素的 position: absolute 不是相对于父元素盒模型，而是相对于「最近的已定位祖先」（即 position 值为 relative、absolute、fixed 或 sticky 的祖先）。Safari 严格遵循这点，但问题常出在：你认为的“父元素”其实没设 position: relative，于是它一路向上找到 —— 而 默认有 margin 或被重置样式干扰，导致视觉偏移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 给伪元素的直接父元素加
position: relative，哪怕它原本不需要定位； - 用 Safari 开发者工具 → Computed 面板 → 查看 “Containing block”，确认参考节点是谁；
- 临时加
outline: 1px solid red到疑似父容器，验证是否包裹预期区域。
tr 元素设 relative 后 ::after 还是飘走？
Safari 中 <tr> 是个经典陷阱：即使写了 <code>tr.spacer { position: relative }，其 ::after 仍可能相对于整个 <table> 定位，而非该行本身。这不是 bug，是 WebKit 对表格内部定位上下文的支持限制。
<p>实操建议：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>避免把 <code>position: relative 加在 <tr> 上，改用 <code><td> 或 <code><th> 作为定位锚点；
<li>换布局方案：用 <code><ul></ul> + display: grid 替代表格，完全避开 <tr> 兼容性问题；
<li>若必须用表格，把分隔线逻辑移到 <code><td> 内部，例如 <code>td.divider::after，并确保 <td> 有 <code>position: relative。
translate(X%, Y%) 在 Safari 里位置飘忽？
伪元素上写 transform: translate(450%, 330%) 看似方便，但在 Safari 中，百分比是按元素自身宽高算的 —— 而按钮等内联元素在不同浏览器中因字体度量、默认 line-height、内联盒行为差异，实际渲染尺寸不一致，导致像素级偏移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式声明宿主元素的
font-size和font-family（哪怕只是继承），统一排版基准； - 改用确定性单位做主定位：
top/left配合px、rem，再用transform: translate()仅作微调（如居中）； - 悬停 tooltip 推荐写法：
top: 100%; left: 50%; transform: translate(-50%, 4px)，而不是全靠百分比位移。
伪元素没显示或点击失效？
常见于 iOS Safari：伪元素没背景、没边框、opacity: 0，WebKit 可能直接跳过渲染或拦截事件，导致热区无效或视觉丢失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
::before/::after必须有content: ""，否则不生成； - 扩大点击区域时，务必加
pointer-events: none到伪元素，否则它会挡住真实元素； - iOS Safari 对“完全透明”的伪元素有裁剪倾向，加极低透明度背景兜底：
background: rgba(0,0,0,0.001)； - 若伪元素用于替代
outline，记得同步复制border-radius，否则圆角处会出现直角缺口。
