表行上的边框半径不适用于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上修复它？

Answer 1

您正在分割2个元素的样式，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>