html - <td> 元素上的框阴影行为

Question

---

更新:

在我提交错误报告后:https://bugs.chromium.org/p/chromium/issues/detail?id=763337 ,

看来我们可以在 Chrome 版本 62 中修复它。

---

尝试悬停此 fiddle 的 td 元素在最新版本的 Chrome 和 Firefox 中。

Firefox 工作起来很有魅力(在我看来，框阴影不应该为宽度/高度计算添加任何内容)，但 Chrome 遗憾地添加了滚动条(尝试将鼠标悬停在右下角的单元格上)。

我怎样才能防止这种情况发生，但仍保持响应能力？

此行为似乎只在使用绝对最新的 Chrome 版本时才会发生。对我来说是:

Version 61.0.3163.79 (Official Build) (64-Bit)

刚刚在我的笔记本上测试了代码片段，它仍然安装了一个稍旧的版本。结果:悬停时没有滚动条。 自动更新并重启后，出现滚动条。

div {
  border: 1px solid green;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

table {
  width: 100%;
}

td {
  border: 1px solid red;
}

td:hover {
  box-shadow: 2px 2px 15px -2px rgb(50, 50, 50);
}

<div>
  <table>
    <tr>
      <td>This is some content</td>
      <td>This is some content</td>
      <td>This is some content</td>
    </tr>
    <tr>
      <td>This is some content</td>
      <td>This is some content</td>
      <td>This is some content</td>
    </tr>
  </table>
</div>

Answer 1

它看起来像是 Windows only 上的 Chrome 错误.我也在 Google Canary 中测试过(Chrome 63)并且问题仍然存在，所以它可能不会很快得到修复。

问题是由 overflow: auto 引起的，在您的情况下，可以通过将其删除或设置为可见(默认)轻松解决。

但是 当将单元格悬停在右侧(顶部和底部)时，主体会出现滚动条。一种解决方案是为正文设置 overflow: hidden，以便获得预期的结果。

我想指出，这不是一个很好的解决方案，但我建议在修复此错误之前暂时使用它。

body {
  overflow: hidden;
}

div {
  border: 1px solid green;
  width: 100%;
  overflow: visible;
}

table {
  width: 100%;
}

td {
  border: 1px solid red;
}

td:hover {
  box-shadow: 2px 2px 15px -2px rgb(50, 50, 50);
}

<div>
  <table>
    <tr>
      <td>This is some content</td>
      <td>This is some content</td>
      <td>This is some content</td>
    </tr>
    <tr>
      <td>This is some content</td>
      <td>This is some content</td>
      <td>This is some content</td>
    </tr>
  </table>
</div>