Android Gmail 应用程序：内联图像之间的水平 1px 间隙（<td> 中的图像）答案

【问题标题】：Android Gmail App: Horizontal 1px gaps between inline images (images in <td>)Android Gmail 应用程序：内联图像之间的水平 1px 间隙（<td> 中的图像）
【发布时间】：2017-10-01 20:58:55
【问题描述】：

在 Android Gmail 应用中，内联图像之间有时会有 1px 的空间（多个包含图像）。这会将最右边的图像推到电子邮件框架之外。某些尺寸的图像似乎会发生这种情况，可能与表格/布局的大小有关。

代码示例如下。附上两个截图示例。

This forum post 描述了错误，但没有修复。

我尝试过的：很多。我尝试了提到的谷歌产品论坛帖子中的技巧，但没有奏效。

https://www.inkbrush.com/ 生成的标记具有所有标准变通方法，但仍显示此错误。

此问题在有关 Acid 测试的电子邮件中是间歇性的。有时它只会出现在实际设备上。

屏幕截图，第一个有损坏的图像，但它说明了图像最终的位置：

来自我撰写的电子邮件的示例。完整文件in this gist。

    <tr>
  <td valign="top">
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
      <tr>
        <td valign="top">
          <table border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td><a href="http://tracking.telecharge.com/t/33334376/1094175919/73227780/0/81249/?x=83ab5506" target="_blank"><img alt="" border="0" height="30" src="http://content.telecharge.com/telecharge_marketing/20170425Waitress/WAITRESS_013_TELECHARGE_08.jpg" style="display:block; display:block; max-width:312px;" width="312"></a></td>
            </tr>
          </table>
        </td>
        <td valign="top">
          <table border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td valign="top"><a href="http://tracking.telecharge.com/t/33334376/1094175919/73694490/0/81249/?x=41ab12fe" target="_blank"><img alt="" border="0" height="30" src="http://content.telecharge.com/telecharge_marketing/20170425Waitress/WAITRESS_013_TELECHARGE_09.jpg" style="display:block; display:block; max-width:268px;" width="268"></a></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>

inkbrush 的主要演示示例：

    <tr align="left" style="border-collapse: collapse;border-spacing: 0;border: 0;  ">
    <td>
        <table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;border-spacing: 0;border: 0; min-width:600px;">
            <tbody>
                <tr style="border-collapse: collapse;border-spacing: 0;border: 0;">
                    <td align="left" valign="top" style="   width:204px;  height:60px; ">

                        <img border="0" height="60" src="./497056_files/5ef86d691f3e7d7cf49f027d0f29d03d-original.jpg" style="display:block; line-height:0; border:0;  width:204px; max-width:204px; min-width:204px; height:60px; max-height:60px; min-height:60px;" width="204">


                    </td>

                    <td align="left" valign="top" style="   width:51px;  height:60px; ">

                        <img border="0" height="60" src="./497056_files/f8c41fc2b6d48fca6d4d0b1510c80a84-original.jpg" style="display:block; line-height:0; border:0;  width:51px; max-width:51px; min-width:51px; height:60px; max-height:60px; min-height:60px;" width="51">


                    </td>

                    <td align="left" valign="top" style="   width:49px;  height:60px; ">

                        <img border="0" height="60" src="./497056_files/c93fa6d4d1ffa2eb6a5a992205d1160a-original.jpg" style="display:block; line-height:0; border:0;  width:49px; max-width:49px; min-width:49px; height:60px; max-height:60px; min-height:60px;" width="49">


                    </td>

                    <td align="left" valign="top" style="   width:50px;  height:60px; ">

                        <img border="0" height="60" src="./497056_files/19df3e027e0c5e2391f76a22de1f0743-original.jpg" style="display:block; line-height:0; border:0;  width:50px; max-width:50px; min-width:50px; height:60px; max-height:60px; min-height:60px;" width="50">


                    </td>

                    <td align="left" valign="top" style="   width:52px;  height:60px; ">

                        <img border="0" height="60" src="./497056_files/28a69a7158c8ec60d7cadcbcb2cfe211-original.jpg" style="display:block; line-height:0; border:0;  width:52px; max-width:52px; min-width:52px; height:60px; max-height:60px; min-height:60px;" width="52">


                    </td>

                    <td align="left" valign="top" style="   width:194px;  height:60px; ">

                        <img border="0" height="60" src="./497056_files/caf6117f5e93df6c24631c06c09c06c6-original.jpg" style="display:block; line-height:0; border:0;  width:194px; max-width:194px; min-width:194px; height:60px; max-height:60px; min-height:60px;" width="194">


                    </td>

                </tr>
            </tbody>
        </table>
    </td>
</tr>

【问题讨论】：

标签： android html email gmail

【解决方案1】：

我可能找到了解决办法。

如果不是用文字图像尺寸定义html属性宽度和高度，而是执行width="100%" height="auto"，然后在css中设置一个最大宽度和最大高度，例如：

<td><img src="image1" width="100%" height="auto" alt="" border="0" style="display:block; max-width:200px; max-height:30px"/></td>

<td><img src="image1" width="100%" height="auto" alt="" border="0" style="display:block; max-width:200px; max-height:30px"/></td>

<td><img src="image1" width="100%" height="auto" alt="" border="0" style="display:block; max-width:200px; max-height:30px"/></td>

这为我解决了问题！

通过https://litmus.com/community/discussions/6453-horizontal-gaps-between-images-in-android-gmail#comment-11982

【讨论】：