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;
}

您希望每個單元格都有自己的圖片，而不是每一行。