移动邮件客户端在表格单元格中的图像之间添加间距答案

【问题标题】：Mobile mail clients adding spacing between images in table cells移动邮件客户端在表格单元格中的图像之间添加间距
【发布时间】：2016-01-06 09:50:25
【问题描述】：

Gmail 和 Inbox 等移动邮件客户端在 html 邮件中的图像之间显示不需要的水平间距，而不是垂直间距，如下面的屏幕截图所示。 Web 客户端没有这个问题。

Mobile Gmail/Inbox screenshot

html的结构如下：

     <table cellspacing="0" cellpadding="0" border="0">
           <tr>
              <td><img width="25" height="29" border="0" style="display: block" src="1.jpg"/></td>
              <td><img width="30" height="29" border="0" style="display: block" src="2.jpg"/></td>
              <td><img width="29" height="29" border="0" style="display: block" src="3.jpg"/></td>
              ... <!-- and so on -->
           </tr>
      </table>

所有图像都设置了正确的对应尺寸，并且所有样式（如填充、边距等）都已重置。向表格单元格添加尺寸和跨度也不能解决问题。

是否有可能解决这个问题？

【问题讨论】：

尝试为td添加相同的width
已经试过了，不行。我认为问题在于图像，而不是表格单元格。
好的，您尝试为table 添加width 吗？
是的，仍然没有变化。

标签： html css mobile html-email email-client

【解决方案1】：

您的代码具有所有必要的属性并且看起来很干净，因此问题不在此表范围内。请提供更多信息，最好是仅包含此表的整个 HTML 文件。当像素在高 DPI 屏幕中不均匀下降时，当视口不同并且像素被重新映射为子像素宽度以填充它时，可能会导致调整大小。

作为一种快速解决方法，如果您将 bgcolor 设置为黑色，那么间隙会融入其中怎么办？

您是否在<head> 中设置了正确的视口元标记？

【讨论】：

此表之外没有什么不同。只是多了几张布局基本相同的表格，唯一的区别是下面的表格只包含一张覆盖整个表格宽度的图像。像这样：<table width="600"><tr><img width="600" src="img.jpg" style="display: block;"/></tr></table> 是的，视口元标记已设置。我也更改了 DOCTYPE，因为我发现它留下了空格，但仍然没有变化。