Question

我一直在为客户撰写此简报。一切看起来都很完美，正如我想要的那样。甚至Outlook都了解时事通讯，但后来...... Gmail ..我真的不明白Gmail在浏览器中出了什么问题。我有这段代码。

<table class="w650" width="650" cellpadding="0" cellspacing="0" border="0">
    <tbody>
        <tr>
            <td height="20"></td>
        </tr>

        <tr>
            <td width="225" bgcolor="#e1822d" valign="top" align="left">
                <div style="padding:12px 20px 0px 20px;">
                    <div style="font-family:arial;font-size:20px;color:#FFFFFF;line-height:36px;">
                        <singleline label="Title">Tenerife</singleline>
                    </div>
                    <div style="font-family:arial;font-size:11px;color:#FFFFFF;line-height:20px;">
                        <multiline label="Description">Click to see all properties <br /> Lorem Ipsum Dolor sit amet</multiline>
                    </div>
                </div>
            </td>
            <td width="425" valign="top" align="left">
                <img editable="true" src="images/side_image_01.jpg" label="Image" width="425" border="0" style="border:none;" alt="Image" />
            </td>
        </tr>
    </tbody>
</table>

在其他所有邮件客户端中，它输出如下： enter image description here

但在Gmail和Gmail中，只会在橙色列中输出额外的尺寸：

enter image description here

我知道关注它是愚蠢的，但我的HTML代码是防弹的，甚至旧的Outlook邮件客户端可以正确显示它，但随后Gmail扭曲它真的让我很烦。

是否有人知道我应该在内联css或head css或其他任何内容中输入什么 - 以使Gmail了解？

Answer 1

将display: block;添加到图片代码的style属性或img { display: block; }，如果您在任何地方都有<style>部分，并且还需要将其应用于其他图片。

由于某种原因，Gmail会为未明确指定为display: block的图片添加额外的保证金。

Answer 2

每个邮件客户端都有不同的HTML呈现技术。

我无法真正发现两种图像的区别。我看到两张图片完全相同。

根据我的理解，我可以说，您可以设置固定宽度内联，以强制Gmail使用您的样式。 !important可以帮助您强制造型。

Gmail简报中的HTML列

2 个答案: