Question

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

事实证明，我的基于Bootstrap的响应表不再正常显示。我有一个放在表格单元格内的输入元素。 input元素具有form-control类，因此box-shadow显示在焦点事件上，但是从版本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

如果删除框阴影并使用filter：drop-shadow，则不会出现此问题。

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

Answer 2

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

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

在开发人员工具中，这对我有用。

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

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

2 个答案: