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

Вы хотите, чтобы каждый клетки иметь свою собственную картину, а не каждый строку.

Answer 2

В firefox не заданы фоновое изображение или цвет в tr, это вызовет проблемы. Вместо этого добавьте в td.

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