html - 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