CSS背景图片不可重复仅适用于Firefox

Question

.myclass{
  background-image: url('http://image.flaticon.com/icons/svg/34/34164.svg');
  background-repeat: no-repeat;
  background-size:contain;
  background-position: 1.5%;

}

我表的所有行（tr）都具有myclass类： <tr class="myclass">在Firefox中，图像仅显示在表第一列的所有单元格中，但在chrome和Opera中，表的所有单元格都具有此类背景图。 如何确保仅在chrome和Opera中的第一列中显示？

这是html：

<table>
  <tr class="myclass">
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr class="myclass">
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>

Answer 1

像这样设置

.myclass td:first-child {
  background-image: url('http://image.flaticon.com/icons/svg/34/34164.svg');
  background-repeat: no-repeat;
  background-size:contain;
  background-position: 1.5%;
}

http://codepen.io/brianmtreese/pen/XKwvqX

Answer 2

添加.myclass只有第一th ＆ td

 .myclass{ background-image: url('http://image.flaticon.com/icons/svg/34/34164.svg'); background-repeat: no-repeat; background-size:contain; background-position: 1.5%; } 

 <table> <tr > <th class="myclass">Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td class="myclass">Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> </table>