相邻内容：url() table 元素导致 table 布局不正确

Question

我有一个 3 列 x 2 行 table 布局。每行有两个元素由 content:url()

填充

在第一行中，它们被一个空元素分隔并且布局正确

在第二行，它们是相邻的。 Chrome 和 Safari 都将第二个元素放在第一个元素之下。

任何人都可以解释这种行为并提出简单的修复建议吗？

table td {
  height: 25px;
  width: 25px;
  border-width: 1px;
  border-style: solid;
  border-color: grey;
}
td.X {
  content: url('http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/png/64/Luma%20-%20Red.png');
}
td.Y {
  content: url('http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/png/32/Mushroom%20-%20Mini.png');
}

<table>
  <tbody>
    <tr>
      <td class="X">X</td>
      <td></td>
      <td class="Y">Y</td>
    </tr>
    <tr>
      <td class="X">X</td>
      <td class="Y">Y</td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 1

Table-单元格框不支持使用 content 属性更改其内容。无论您在 Chrome 和 Safari 中看到什么，都是非标准行为。

您可能打算将生成的内容作为 ::before 或 ::after 伪元素插入到单元格中。

相邻内容：url() table 元素导致 table 布局不正确

Adjacent content: url() table elements result in incorrect table layout

html

css

css-content