html - Firefox 在 <td> 标签之间添加水平间距

Question

好吧，这可能是一个愚蠢的问题，但我正在尝试制作一个包含 3 列的表格，但 Firefox 在所有列之间添加了 1-2 像素的空间。该表在 Chrome 中看起来不错。我怎样才能消除这个额外的间距？使用开发工具检查时，我看不到这些空间。

<table role="presentation" align="center" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F1F1F1" style="background:#F1F1F1; max-width:640px; border-spacing:-1; border-collapse:collapse; text-align:center;">
  <tr>
    <td style="display:inline-block; vertical-align:top; min-width:120px; width:33.33%;">
      <img id="IMG-small" src="https://picsum.photos/640/300?random=1" alt="" width="213" style="display:block;width:100%;height:auto;max-width:480px;margin:0 auto;" border="0">
    </td>
    <td style="display:inline-block; vertical-align:top; min-width:120px; width:33.33%;">
      <img id="IMG-small" src="https://picsum.photos/640/300?random=2" alt="" width="213" style="display:block;width:100%;height:auto;max-width:480px;margin:0 auto;" border="0">
    </td>
    <td style="display:inline-block; vertical-align:top; min-width:120px; width:33.33%;">
      <img id="IMG-small" src="https://picsum.photos/640/300?random=3" alt="" width="213" style="display:block;width:100%;height:auto;max-width:480px;margin:0 auto;" border="0">
    </td>
  </tr>
</table>

我正在为一些电子邮件营销开发这个，所以我不能使用任何类型的 JavaScript，而且任何高级 CSS 基本上都是不行的，因为我需要考虑范围广泛的电子邮件客户端。这也是我不使用 DIV 进行布局的原因。

我正在寻找的结果是让所有列都出现在单行中而不是换行。

Answer 1

由于您设置了 td { display: inline-block;，您看到的是 whitespace }。如果你真的需要它，解决它的一种方法是设置父元素的 font-size: 0;:

<table role="presentation" align="center" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F1F1F1" style="background:#F1F1F1; max-width:640px; border-spacing:-1; border-collapse:collapse; text-align:center;">
  <tr style="font-size: 0;">
    <td style="display:inline-block; vertical-align:top; min-width:120px; width:33.33%;">
      <img id="IMG-small" src="https://picsum.photos/640/300?random=1" alt="" width="213" style="display:block;width:100%;height:auto;max-width:480px;margin:0 auto;" border="0">
    </td>
    <td style="display:inline-block; vertical-align:top; min-width:120px; width:33.33%;">
      <img id="IMG-small" src="https://picsum.photos/640/300?random=2" alt="" width="213" style="display:block;width:100%;height:auto;max-width:480px;margin:0 auto;" border="0">
    </td>
    <td style="display:inline-block; vertical-align:top; min-width:120px; width:33.33%;">
      <img id="IMG-small" src="https://picsum.photos/640/300?random=3" alt="" width="213" style="display:block;width:100%;height:auto;max-width:480px;margin:0 auto;" border="0">
    </td>
  </tr>
</table>

请记住为 td 元素的表格中的任何文本设置您实际需要的字体大小。