表格行的边框半径在Firefox上无效。

Question

我正在使我的表格行的背景具有圆角。以下是CSS代码：

<table>
    <tr>
        <td> first cell </td>
        <td> middle cell </td>
        <td> third cell </td>
    </tr>
</table>

tr:hover {
    background-color: #ffff00;
}
tr:hover td:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

tr:hover td:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

jsFiddle

在Chrome上它工作得很好：

但它在Firefox上不起作用：

我做错了什么，如何在Firefox上修复它？

- Chin

---

适用于 Firefox 36.0.4。 - Madhawa Priyashantha

我使用的是Firefox 37.0.1（刚刚更新），但它不起作用，就像图片中显示的那样。我想在我的Firefox 36上也没有工作过。 - Chin

刚刚的编辑之前它运行得很好。在这个版本中，你将黄色背景应用于tr而不是td，而在Firefox中，tr显然不能拥有圆角。 - Sebastian Simon

您的更新代码在Chrome上工作良好，但在Firefox上却不起作用。 - Madhawa Priyashantha

这是2021年，版本92，仍然不起作用！！！ - eddy

Answer 1

你正在将样式分为两个元素，但是FF无法理解。

背景在tr上，圆角在td上。

可能的解决方案：在td上应用背景。

body {
    margin: 100px;
}

td {
    padding: 10px;
}

tr:hover td {
    background-color: #ffff00;
}
tr:hover td:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

tr:hover td:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

<table>
    <tr>
        <td> first cell </td>
        <td> middle cell </td>
        <td> third cell </td>
    </tr>
</table>

- vals

---

将背景颜色应用于 td 对我来说很有效。 - Srikanth V