如何在 Safari 中修复 <tr> 的剪裁轮廓？

Question

我试图用轮廓突出显示当前悬停的 table 行。它在 Firefox 和 Chrome...

第一个图片显示的是 Firefox...第二个是 Safari。

CSS比较简单：

table tbody tr:hover {
    background-color: #48f2;
    outline: 3px solid #48f8;
}

什么会导致这种行为？这是已知错误吗？

PS：隐藏 Safari (CMD+Tab) 并在没有任何鼠标移动的情况下再次显示它可以正确呈现 <tr>...所以我认为这是一个显示错误。但也许有解决方法？

Answer 1

我今天尝试了一些明显的方法...并且成功了：

/* default state for Safari */
table tbody tr {
    outline: 3px solid #0000;
}
/* highlight table row upon hover */
table tbody tr:hover {
    background-color: #48f2;
    outline: 3px solid #48f8;
}

只需为默认状态设置透明轮廓即可解决此 Safari 错误。我想 Safari 会在页面初始呈现期间确定外部边界，并在以后使用它进一步优化呈现。

如何在 Safari 中修复 <tr> 的剪裁轮廓？

How to fix a clipped outline of a <tr> in Safari?

css

safari