更新:

在我提交了錯誤報告:https://bugs.chromium.org/p/chromium/issues/detail? id = 763337之后，

似乎我們可以在Chrome版本62中修復它。

試著在Chrome和Firefox的最新版本中懸停這個小提琴的td元素。

Firefox工作起來很有魅力(在我看來，一個框形陰影不應該給寬度/高度計算增加任何東西)，但是Chrome可悲地增加了滾動條(試著懸停在右下角的單元格)。

我如何防止這種情況發生，但仍然保持響應能力？

這種行為似乎只有在使用絕對最新的Chrome版本時才會發生。對我來說就是:

版本61.0.3163.79(官方版本)(64位)

剛剛在我的筆記本上測試了代碼片段，它仍然安裝了一個稍舊的版本。結果:懸停時沒有滾動條。 在自動更新和重啟后，滾動條出現了。

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>

它看起來像只在Windows上的Chrome的錯誤。我也在谷歌金絲雀(Chrome 63)上測試過，問題依然存在，所以可能不會很快修復。

這個問題是由溢出:自動，在你的情況下，它可以很容易地通過刪除它或設置為可見(默認)解決。

但是，當懸停在右邊(頂部和底部)的單元格時，會出現正文的滾動條。一個解決方案可以是為正文設置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>

我用過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>

我覺得用chrome。你可以試著 -WebKit-box-shadow:5px 5px 15px-2px RGB(50，50，50)；