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

由于您设置了whitespace，因此您看到的是td { display: inline-block; }。如果确实需要，一种解决方法是设置父元素的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元素上可能包含的任何文本设置实际所需的字体大小。

Firefox在标签之间添加水平间距

1 个答案: