`box-shadow` 无法在 Chrome 中与 `border-collapse` 和 `position:relative` 结合使用

Question

我有一个带有数据的

<table>

。由于风格原因，它有

border-collapse

。

在该表中，

<td>

元素具有

position: relative

，因为我希望它们有一个工具提示（我通过子

<div>

和

position: absolute

实现）。

在 Chrome 中，除非我删除

box-shadow

或

<td>

（我不想删除，因为出于上述原因我需要它们），否则

border-collapse

的

position: relative

不起作用。我该如何解决这个问题？它在 Firefox 中运行良好。

这是一个小例子：

table {
  border-collapse: collapse;
}

td {
  position: relative;
  box-shadow: 0 0 10px black;
}

<table>
  <tr>
    <td>This has a shadow in Firefox but not in Chrome</td>
  </tr>
</table>

对于质疑

position: relative

的人，这里有一个更长的示例，其中删除

position: relative

会破坏工具提示所需的功能：

table {
  border-collapse: collapse;
}

td {
  position: relative;
  box-shadow: 0 0 10px black;
  border: 1px solid black;
}

div {
  visibility: hidden;
  position: absolute;
  background-color: #ff5555;
  z-index: 1000;
  right: 0; /* -1px looks inconsistent across columns :( */
  top: 100%; /* pixel-perfect */
  padding: 5px;
  border: 1px solid black;
}

td:hover>div {
  visibility: visible;
}

<table>
  <tr>
    <td>Hover your mouse cursor here
      <div>tooltip</div>
    </td>
  </tr>
  <tr>
    <td>Shadow is missing in Chrome</td>
  </tr>
</table>

Answer 1

这是 Chrome 中

border-collapse

、

position: relative

和

box-shadow

组合的已知问题。

原始解决方案

1. 表格行上的框阴影未出现在某些浏览器上

以下是修改 CSS 的方法：

table {
  border-collapse: collapse;
}

td {
  position: relative;
  box-shadow: 0 0 10px black;
  transform: scale(1);
}

div {
  visibility: hidden;
  position: absolute;
  background-color: #ff5555;
  z-index: 1000;
  right: 0;
  top: 100%;
  padding: 5px;
  border: 1px solid black;
}

td:hover>div {
  visibility: visible;
}