html - 表格单元格内的框阴影导致滚动条显示

Question

我已将 Google Chrome 更新到版本 61.0.3163.100。

事实证明，我基于 Bootstrap 的响应式表格不再正确显示。我在表格单元格中放置了一个输入元素。 input 元素具有 form-control 类，因此在焦点事件上显示框阴影，但从版本 61.0 开始也显示滚动条。我不明白为什么滚动条会显示出来，尽管可以简单地以不需要滚动条的方式扩展表格单元格——它发生在早期版本的 Chrome 中。此外，它仍然可以在 Firefox 和 IE 上正常运行。

我做了一个样本:https://jsfiddle.net/gstm/1zxfjo75/1/ (如果你点击输入，会显示一个滚动条)

<!-- Tested with Bootstrap v3.3.7 -->
<div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lorem ipsum</td>
          <td><input type="text" class="form-control" /></td>
        </tr>
      </tbody>
    </table>
</div>

在我看来，以前的行为似乎比现在的行为更合理。这是一个错误吗？你会建议什么解决方法？

请注意，设置 overflow-x: hidden 不是解决方案，因为我仍然需要利用 Bootstrap 提供的响应式表格(在小屏幕上显示大表格的可能性)。

Answer 1

如果您删除 box-shadow 并改用 filter: drop-shadow，您将不会遇到此问题。

.form-control:focus {
    box-shadow: 0;
    filter: drop-shadow(0 0 8px rgba(102,175,233,.6));
}