Chrome 元素上的盒影行为< td>

sc4hvdpw 于 2023-06-03 发布在 Go

关注(0)|答案(3)|浏览(615)

更新：

在我提交了一个bug报告之后：https://bugs.chromium.org/p/chromium/issues/detail?id=763337，
我们可以在Chrome版本62中修复它。
尝试在最新版本的Chrome和Firefox中悬停此fiddle的td元素。
Firefox工作起来很有魅力（在我看来，框形阴影不应该增加任何宽度/高度计算），但Chrome可悲地增加了滚动条（尝试悬停右下角的单元格）。
我怎样才能防止这种情况发生，但仍然保持响应？
这种行为似乎只发生在使用绝对最新的Chrome版本时。对我来说就是：
版本61.0.3163.79（Official Build）（64-Bit）
刚刚在我的笔记本上测试了代码片段，其中仍然安装了稍旧的版本。结果：悬停时没有滚动条。自动更新和重新启动后，滚动条出现。

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>

google-chrome

来源：https://stackoverflow.com/questions/46112995/box-shadow-behaviour-on-td-elements

3条答案

按热度按时间

rks48beu1#

这看起来像是Chrome在Windows上的bug。我也在Google Canary（Chrome 63）中进行了测试，问题仍然存在，因此可能不会很快修复。
这个问题是由overflow: auto引起的，在您的情况下，可以通过删除它或设置为可见（默认）来轻松解决。

但是当鼠标悬停在右侧（顶部和底部）的单元格时，滚动条会出现在正文中。一个解决方案可以是为主体设置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>

赞(0）回复(0）举报 2023-06-03

yjghlzjz2#

我使用了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>

赞(0）回复(0）举报 2023-06-03

soat7uwm3#

我想是Chrome。你可以试着
-webkit-box-shadow：5px 5px 15px -2px rgb（50，50，50）;

赞(0）回复(0）举报 2023-06-03