Question

更新

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

似乎我们可以在Chrome版本62中修复它。

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

Firefox就像一个魅力（在我看来，盒子阴影不应该在宽度/高度计算中添加任何东西），但Chrome遗憾地添加了滚动条（尝试将鼠标悬停在右下角）。

如何防止这种情况发生，但仍保持响应能力？

使用绝对最新的Chrome版本时，似乎只会出现这种情况。对我来说是：

版本61.0.3163.79（官方版）（64位）

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 1

在Windows only上看起来像是Chrome的错误。我也在Google Canary（Chrome 63）中进行了测试，问题仍然存在，因此可能很快就无法修复。

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

然而当鼠标悬停在右侧（顶部和底部）的单元格时，主体会显示滚动条。解决方案可以是为身体设置overflow: hidden，以便根据需要获得预期的结果。

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 2

我使用了flex-box，因为它很容易且响应很快。

以下是代码：

div {
  border: 1px solid green;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

table {
  width: 100%;
}

tr {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

td {
  flex: 1;
  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 3

我认为用chrome。你可以试试 -webkit-box-shadow：5px 5px 15px -2px rgb（50,50,50）;

元素上的box-shadow行为

3 个答案: