是否可以绝对放置<img/>元素，使用a作为父元素？

Question

我有一个页面，它在表格的数据库中显示（摘要）记录。我希望在每行的左侧显示一个图标，以便在视觉上标记“＃”。一些记录，如果他们符合某些标准。

是否可以使用<img>作为父级来绝对放置<tr>元素？ （或者是否有其他方法可以达到同样的效果？）

echo "<tr>"; 
    echo "<td>" . $result['data'] . "</td>";
echo "</tr>"; 

（我知道定位<img>绝对我会简单地使用position: absolute; top: 0; left: -20;等。

Answer 1

不幸的是，位置：表格单元格上的相对值在Firefox中不起作用。所以你需要在单元格中放置一个div并给出相对定位和它的子句绝对值。

<td>
  <div style="position:relative">
      <img src="foo" style="position:absolute;" />  
  </div>
</td>

Firefox bug reference

Answer 2

您可以为这些特殊行设置一个类，并使用:before或:after伪元素并混淆定位以使其正确。

你可以这样说：

.specialRow:before, .specialRow::before {
    content: url('imageURL.jpg');
    //set up positioning of the element
}

你可能仍然需要像moettinger那样说定位恰到好处，但我认为使用:before和:after是最好的选择。

Answer 3

为了在父级内部绝对定位某些内容，您需要使用position：relative属性。尝试以下CSS：

tr {
  position: relative;
}
img {
  position: absolute; top: 0; left: -20;
}

显然你需要在tr

中使用img HTML