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

【问题标题】：Box-shadow inside a table cell causes scrollbar reveal表格单元格内的框阴影导致滚动条显示
【发布时间】：2018-03-21 01:26:40
【问题描述】：

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

事实证明，我基于 Bootstrap 的响应式表格不再正确显示。我在表格单元格中放置了一个输入元素。输入元素具有表单控制类，因此框阴影显示在焦点事件上，但从版本 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 提供的响应式表格（在小屏幕上显示大表格的可能性）。

【问题讨论】：

标签： html css twitter-bootstrap google-chrome

【解决方案1】：

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

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

【讨论】：

感谢您的建议，但导致IE浏览器不显示阴影。
@JDewitt 谢谢！这就是我需要的确切答案！

【解决方案2】：

盒子阴影离开屏幕，因此添加了滚动以显示整个区域。如果您的输入有更多的余量，您将不会注意到这一点。一个解决方案是稍微调整你的盒子阴影大小：

box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 7px rgba(102,175,233,.6);

在开发者工具中为我做的。

另一种解决方案是在此输入的父 <td> 周围添加 padding: 10px;。这将留出足够的空间来显示整个盒子阴影。

【讨论】：