在 Gmail 应用中显示错误大小或间距错误的图像答案

【问题标题】：Images displaying the wrong size or with incorrect spacing in Gmail app在 Gmail 应用中显示错误大小或间距错误的图像
【发布时间】：2013-11-26 23:54:42
【问题描述】：

我有一个基于表格的 html 电子邮件，它可以在 Web 浏览器的 Outlook、Thunderbird 和 Gmail 中正确显示。当我在 Android 设备上的 Gmail 应用程序中查看电子邮件时，图像无法对齐。我已经对 Gmail 中的图像使用了经过验证的 style="display:block" 修复，但也没有运气。在桌子上设置border-collapse:collapse; 似乎也没有什么区别。奇怪的是，结果似乎因使用的设备而异。例如，下面我在 Galaxy Nexus 上的示例代码使用三个图像来呈现比其上方和下方的行更窄的行。在 Nexus 5 上，结果正好相反，三个图像行显示的宽度比其他行宽。我认为问题可能是由于应用程序缩放电子邮件以适应屏幕的方式。或者我忽略了一些非常基本的东西。如果有任何帮助或想法，我将不胜感激。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="#FFFFFF">
<table id="Table_01" width="600" height="619" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="3" style="width:600px; height:454px;">
            <img src="http://www.netmockup.com/gmailtest/images/index_01.png" width="600" height="454" alt="" border="0" style="display:block;" /></td>
    </tr>
    <tr>
        <td style="width:203px; height:104px;">
            <img src="http://www.netmockup.com/gmailtest/images/index_02.png" width="203" height="104" alt="" border="0" style="display:block;" /></td>
        <td style="width:194px; height:104px;">
            <img src="http://www.netmockup.com/gmailtest/images/index_03.png" width="194" height="104" alt="" border="0" style="display:block;" /></td>
        <td style="width:203px; height:104px;">
            <img src="http://www.netmockup.com/gmailtest/images/index_04.png" width="203" height="104" alt="" border="0" style="display:block;" /></td>
    </tr>
    <tr>
        <td colspan="3" style="width:600px; height:61px;">
            <img src="http://www.netmockup.com/gmailtest/images/index_05.png" width="600" height="61" alt="" border="0" style="display:block;" /></td>
    </tr>
</table>
</body>
</html>

【问题讨论】：

标签： gmail html-email

【解决方案1】：

首先.. 大多数 android 邮件应用程序都很糟糕，它们不会像任何其他邮件客户端一样呈现 html。

你必须把它设为<td width="203" height="104"> 而不是<td style="width:203px; height:104px;">，所以不是风格，而是直接在<td> 上。

我发现 android gmail 应用程序在所有 tds 上都需要一个 style="min-width: XXX px"，否则它不会关心宽度。

在试金石中查看结果：https://litmus.com/pub/9c8ab31

所以最后的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="#FFFFFF">
<table id="Table_01" width="600" height="619" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="600" height="454" colspan="3"  style="min-width:600px"><img src="http://www.netmockup.com/gmailtest/images/index_01.png" width="600" height="454" alt="" border="0" style="display:block;" /></td>
  </tr>
  <tr>
    <td width="203" height="104" style="min-width:203px"><img src="http://www.netmockup.com/gmailtest/images/index_02.png" width="203" height="104" alt="" border="0" style="display:block;" /></td>
    <td width="194" height="104" style="min-width:194px"><img src="http://www.netmockup.com/gmailtest/images/index_03.png" width="194" height="104" alt="" border="0" style="display:block;" /></td>
    <td width="203" height="104" style="min-width:203px"><img src="http://www.netmockup.com/gmailtest/images/index_04.png" width="203" height="104" alt="" border="0" style="display:block;" /></td>
  </tr>
  <tr>
    <td width="600" height="61" colspan="3" style="min-width:600px"><img src="http://www.netmockup.com/gmailtest/images/index_05.png" width="600" height="61" alt="" border="0" style="display:block;" /></td>
  </tr>
</table>
</body>
</html>

【讨论】：

感谢您的回复。我已经尝试直接在 td 上设置宽度和高度，并切换到内联样式，看看是否会得到不同的结果。我之前没有看到你关于需要最小宽度的建议，但不幸的是它并没有解决我的问题。您发布的石蕊链接中“Gmail App (Android)”的图片显示了我在说什么。
那么我认为我不完全理解您的问题，因为我看到石蕊链接所有三个框都在 Android 的 gmail 应用程序上完美对齐