Safari 和 iOS WebKit 对表格元素（如 ）应用 position: relative 无效，因其不支持表格内部元素作为 CSS 定位上下文；需改用非表格结构或包裹容器来实现可靠绝对定位。

safari 和 ios webkit 对表格元素（如 `

`）应用 `position: relative` 无效，因其不支持表格内部元素作为 css 定位上下文；需改用非表格结构或包裹容器来实现可靠绝对定位。

在 Web 开发中，尝试对 <tr> 设置 <code>position: relative 并在其子元素 <td> 上使用 <code>position: absolute 是一种常见但不符合规范的做法。根据 CSS 规范，表格格式化上下文（table formatting context）中的行（<tr>）、单元格（<code><td>）等元素<strong>不参与常规的 CSS 定位流</strong>，也不提供定位上下文（containing block）。因此，即使 Chrome 或 Firefox 在某些版本中“看似生效”，该行为属于非标准兼容性表现，而 Safari / iOS WebKit 严格遵循规范，直接忽略 <code><tr> 的 <code>position: relative 声明——此时 <td> 的 <code>position: absolute 将回退到最近的有效定位祖先（如 .container），导致布局错乱。

✅ 正确解决方案：避免依赖表格元素创建定位上下文。推荐以下两种稳健方式：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

方案一：用语义化块级结构替代表格（推荐）
将表格逻辑重构为 div + Flex/Grid 布局，完全可控且跨浏览器一致：

<div class="container">
  <div class="row">
    <div class="cell"></div>
  </div>
</div>

.container {
  position: relative;
  padding: 100px;
  background-color: red;
}

.row {
  position: relative; /* ✅ 有效：div 支持定位上下文 */
  display: flex;
}

.cell {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: blue;
}

方案二：在 <td> 内部嵌套定位容器（兼容旧表格结构）<br> 若必须保留 <code><table> 标签（如数据表格场景），可在 <code><td> 内添加一层 <code>div 并赋予定位能力：

<div class="container">
  <table>
    <tr>
      <td><div class="abs-wrapper"></div></td>
    </tr>
  </table>
</div>

.container { position: relative; padding: 100px; background: red; }
.abs-wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* 等效 inset: 0 */
  width: 10px;
  height: 10px;
  background-color: blue;
}

⚠️ 注意事项：

• 不要对 <tr>、<code><tbody>、<code><thead> 或 <code><table> 设置 <code>position: relative 以期望创建定位上下文——它们在所有主流浏览器中均不可靠；
• inset: 0 是 top: 0; right: 0; bottom: 0; left: 0 的简写，现代 Safari 已全面支持（iOS 14.5+），如需兼容更老版本，请展开书写；
• 若涉及可访问性（如数据表格），优先采用方案二并确保语义不变，必要时通过 role="row" / role="cell" 补充 ARIA 属性。

总之，表格的核心职责是展示二维结构化数据，而非承担 UI 布局任务。将定位、动画、复杂交互逻辑交由标准块级容器处理，才能真正实现跨平台一致性与长期可维护性。