在Firefox中，CSS与谷歌浏览器不同，我该怎么办？

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>

所以，你应该在每个单元格上都有相同的图片，我在谷歌浏览器中有。 但是当我在Firefox中使用它时，我会在两个单元格中获得相同的图片。

Google Chrome和Firefox。

有关这是什么的任何线索？我可以在我的CSS中写一些东西，让它适用于Firefox。提前谢谢！

Answer 1

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

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

Answer 2

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

<tr>

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