Question

我有一个基于表格的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>

Answer 1

首先......大多数android邮件应用程序都很糟糕，他们将html渲染为任何其他邮件客户端。

您必须将其设为<td width="203" height="104">而不是<td style="width:203px; height:104px;">，因此不是风格，而是直接<td>。

我发现android gmail app在所有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>

在Gmail应用中显示错误尺寸或间距不正确的图片

1 个答案: