Firefox中的CSS与Google Chrome看起来不同，该怎么办？

Question

为了好玩，我正在做一张表格，每行有两个单元格。 我希望第一行中的单元格具有相同的图片，所以我在CSS中写道：

tr:nth-child(1){
background-image:url("cat.jpg");
background-size:cover;
border-radius:10px;
}

我的HTML代码如下所示：

<tr>
  <td>Ruta 1</td>
  <td>Ruta 2</td>
</tr>
<tr>
  <td>Ruta 3</td>
  <td>Ruta 4</td>
</tr>

因此，您在每个单元格上应该有相同的图片，而我在Google Chrome中也是如此。 但是，当我在Firefox中使用它时，我在两个单元格上得到了相同的图片。

关于这是什么线索？ 我可以在CSS中写一些东西使其在Firefox上运行吗？ 提前致谢！

Answer 1

在firefox中，不要在tr中设置背景图像或颜色，这会造成问题。 而是添加到td。

tr:nth-child(1) td{background-image:url("cat.jpg");}

Answer 2

将背景应用于单元格- <td>而不应用于行- <tr> 。

tr:nth-child(1) td {
    background-image:url("cat.jpg");
    background-size:cover;
    border-radius:10px;
}

您希望每个单元格都有自己的图片，而不是每一行。