html - CSS 在 Firefox 中看起来与 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 中使用它时，我在两个单元格上得到了相同的图片。

Google Chrome , 和 Firefox .

有什么线索吗？我可以在我的 CSS 中写一些东西让它适用于 Firefox 吗？提前致谢!

Answer 1

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

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

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