解决Safari中表格行伪元素定位问题：创建跨浏览器兼容的上下文菜单分隔符

<table class="context-menu">
  <tr>
    <td>Cut</td>
    <td>Ctrl+X</td>
  </tr>
  <tr class="spacer">
      <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>

table.context-menu {
  --item-active: #316ac4;
  --item-disabled: #ABA89A;
  --table-padding: 2px;
  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 tr.spacer {
  /* tr本身仍可保持相对定位，但关键在于td */
  position: relative; 
  height: 8px; /* 为分隔线预留高度 */
}

/* 将伪元素应用到td上，并使其相对于td定位 */
table.context-menu tr.spacer td {
    position: relative; /* 确保td是定位上下文 */
    padding: 0; /* 移除td默认内边距，以便伪元素占据整个空间 */
    height: 100%; /* 让td占据tr的全部高度 */
}

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 > tbody > tr > td {
  white-space: nowrap;
  padding: 4px 1em;
}
table.context-menu > tbody > tr.disabled > td {
  color: var(--item-disabled);
}
table.context-menu > tbody > tr:not(.disabled):hover > td {
  cursor: default;
  background-color: var(--item-active);
  color: #fff;
}
table.context-menu > tbody > tr > td:first-of-type {
  width: 100%;
}
/* ... 其他样式 ... */

<menu class="context-menu">
  <li class="grid">
    <span>Cut</span>
    <span>Ctrl+X</span>
  </li>
  <li class="spacer"></li> <!-- 使用一个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>

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);
  margin: 0; /* 移除默认外边距 */
}

.grid {
  display: grid; /* 使用CSS Grid布局 */
  grid-template-columns: repeat(2, 1fr); /* 两列，均分宽度 */
  gap: 1em; /* 列间距 */
  padding: 5px;
  white-space: nowrap;
  align-items: center; /* 垂直居中对齐 */
}

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

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

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

.spacer {
  height: 1px; /* 分隔线的高度 */
  background-color: var(--item-disabled); /* 分隔线的颜色 */
  margin: 2px 0; /* 上下外边距，用于分隔 */
  /* 或者使用边框实现分隔线效果 */
  /* border: solid var(--item-disabled);
  border-width: 0 0 1px 0;
  margin: 2px; */
}