解决Safari中

实现思路:

1. 确保作为分隔符的

更新后的HTML结构:

从0到爆款高转化AI广告生成器

<table class="context-menu">
  <tr>
    <td>Cut</td>
    <td>Ctrl+X</td>
  </tr>
  <tr class="spacer">
      <td></td> <!-- 添加空的td元素 -->
      <td></td> <!-- 根据需要添加更多td -->
  </tr>
   <tr>
    <td>Copy</td>
    <td>Ctrl+C</td>
  </tr>
  <tr class="disabled">
    <td>Paste</td>
    <td>Ctrl+V</td>
  </tr>
</table>

更新后的CSS样式:

/* 保持 tr.spacer 的相对定位和高度 */
table.context-menu tr.spacer {
  position: relative;
  height: 8px;
}
/* 将伪元素附加到 td 上 */
table.context-menu tr.spacer td:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0; /* 确保从 td 的左侧开始 */
  bottom: 0;
  margin: auto 0;
  height: 1px;
  width: 100%; /* 宽度覆盖 td */
  background-color: var(--item-disabled);
}
/* 其他表格样式 */
table.context-menu {
    --item-active: #316ac4;
    --item-disabled: #ABA89A;
    list-style: none;
    position: absolute;
    left: 0;
    padding: 2px;
    margin: 0;
    color: #000;
    background-color: #FFF;
    border: 1px var(--item-disabled) solid;
    border-collapse: separate;
    border-spacing: 0px;
    min-width: 10em;
}
table.context-menu > tbody > tr > td {
  white-space: nowrap;
  padding: 4px 1em;
}
/* ... 其他相关样式 ... */

通过将伪元素附加到

解决方案二：采用非表格布局（menu结合CSS Grid）

在许多情况下，如果你的“表格”实际上并非用于展示纯粹的表格数据（例如，上下文菜单、列表项），那么使用

/
• 或结合CSS Grid或Flexbox，可以彻底规避

实现思路:

1. 使用或
   作为容器。
2. 使用
3. 作为每个菜单项或列表项。
4. 利用CSS Grid或Flexbox来模拟表格的列布局。
5. 分隔符可以是一个独立的
6. 元素，通过设置边框或背景来创建。

HTML 结构:

<menu class="context-menu">
  <li class="grid">
    <span>Cut</span>
    <span>Ctrl+X</span>
  </li>
  <li class="spacer"></li> <!-- 作为分隔符的独立列表项 -->
  <li class="grid">
    <span>Copy</span>
    <span>Ctrl+C</span>
  </li>
  <li class="grid disabled">
    <span>Paste</span>
    <span>Ctrl+V</span>
  </li>
</menu>

CSS 样式:

menu.context-menu {
    --item-active: #316ac4;
    --item-disabled: #ABA89A;
    list-style: none; /* 移除默认列表样式 */
    box-sizing: border-box;
    padding: 2px;
    position: absolute; /* 如果是上下文菜单，可能需要绝对定位 */
    left: 0;
    width: 100%;
    border: 1px solid var(--item-disabled);
}

.grid {
    display: grid; /* 使用CSS Grid布局 */
    grid-template-columns: repeat(2, 1fr); /* 两列，等宽 */
    justify-content: space-between; /* 内容两端对齐 */
    border-width: 1px 0 0 0; /* 可选：顶部边框 */
}

.grid > span {
    padding: 5px;
    white-space: nowrap;
}

.grid > span:last-child {
    text-align: right; /* 第二列右对齐 */
}

.grid:not(.disabled):hover {
    background-color: var(--item-active);
    color: #fff;
}

.grid.disabled {
    color: var(--item-disabled);
}

.spacer {
    height: 1px; /* 分隔线高度 */
    border: solid var(--item-disabled);
    border-width: 0 0 1px 0; /* 底部边框作为分隔线 */
    margin: 2px; /* 留出一些上下空间 */
}

这种方法不仅解决了伪元素定位的兼容性问题，还带来了以下额外好处：

• 语义化: 对于非表格数据，使用menu或ul更符合HTML语义。
• 灵活性: CSS Grid和Flexbox提供了更强大的布局能力，更容易实现复杂的响应式设计。
• 跨浏览器一致性: 现代布局技术在主流浏览器中的表现更为一致和可预测。

注意事项与最佳实践

1. 语义化优先: 始终优先考虑HTML元素的语义。如果内容确实是表格数据，使用

、