Html 框阴影行为在<；td>；元素

更新：

在我提交错误报告后：

看来我们可以在Chrome版本62中修复它

---

尝试在最新版本的Chrome和Firefox中悬停td元素

Firefox就像一个魔咒（在我看来，框阴影不应该在宽度/高度计算中添加任何内容），但Chrome不幸地添加了滚动条（尝试将鼠标悬停在右下角的单元格）

我如何防止这种情况发生，但仍然保持响应能力

这种行为似乎只有在使用最新的Chrome版本时才会发生。对我来说，威奇是：

版本61.0.3163.79（正式版本）（64位）

刚刚在我的笔记本上测试了代码片段，它仍然安装了一个稍旧的版本。结果：悬停时没有滚动条。 自动更新和重新启动后，滚动条出现

div{
边框：1px纯绿色；
宽度：100%；
溢出-x：自动；
溢出y：自动；
}
桌子{
宽度：100%；
}
运输署{
边框：1px纯红；
}
td:悬停{
盒影：2px2px15px-2pxRGB（50,50,50）；
}

这是一些内容
这是一些内容
这是一些内容
这是一些内容
这是一些内容
这是一些内容

我使用了flex box，因为它很简单，响应速度也很快

代码如下：

div{
边框：1px纯绿色；
宽度：100%；
溢出-x：自动；
溢出y：自动；
}
桌子{
宽度：100%；
}
tr{
显示器：flex；
柔性包装：包装；
弯曲方向：行；
}
运输署{
弹性：1；
边框：1px纯红；
}
td:悬停{
盒影：2px2px15px-2pxRGB（50,50,50）；
}

这是一些内容
这是一些内容
这是一些内容
这是一些内容
这是一些内容
这是一些内容

我认为使用chrome。您可以尝试

---

-webkit盒阴影：5px 5px 15px-2px rgb（50,50,50）

它看起来像是电脑上的Chrome bug。我在（Chrome 63）中也进行了测试，但问题仍然存在，因此可能无法尽快修复

该问题是由

溢出：auto

引起的，在您的情况下，可以通过将其删除或设置为可见（默认）来轻松解决

但是将单元格悬停在右侧（顶部和底部）时，滚动条将显示主体。解决方案是为主体设置

overflow:hidden

，以便获得所需的结果

我想指出的是，这不是一个很好的解决方案，但我建议暂时使用它，直到这个bug被修复为止

正文{
溢出：隐藏；
}
div{
边框：1px纯绿色；
宽度：100%；
溢出：可见；
}
桌子{
宽度：100%；
}
运输署{
边框：1px纯红；
}
td:悬停{
盒影：2px2px15px-2pxRGB（50,50,50）；
}

这是一些内容
这是一些内容
这是一些内容
这是一些内容
这是一些内容
这是一些内容

我在chrome上没有提到的行为…我有（Windows上的chrome 61）这一定是个bug。。。刚刚注意到61正在下载，因此无法测试。但是尝试添加溢出：隐藏？我没有看到这种行为。我使用的是Mac Chrome版本61.0.3163.79。只是一个争论点。。。“在我看来，长方体阴影不应在宽度/高度计算中添加任何内容”一个属性做什么或不做什么并不取决于您的意见。谁说过响应性，这是如何解决问题的？最重要的是，为什么要将表转换为flexbox？这不会改变行为。您是否考虑过将此报告为回归问题？我查看过类似的报告，发现它被标记为“wontfix”，但由于我们确信在当前更新之前类似的东西工作正常，也许它值得重新使用。（顺便说一句，我也可以确认这一点：我在W10上试用过Chrome 60-OK，更新过，不OK。）@myf我今天早上写了一份bug报告；）而且，似乎Chrome版本62将修复该漏洞。