当Outlook在Outlook中运行时，如何阻止此桌面拉伸Gmail？

时间：2015-12-21 16:33:18

标签： html email outlook gmail

我正在为Outlook创建HTML电子邮件签名。我已经创建了代码并将其添加到我的签名中，但我遇到了一个问题。我试图制作的简单黑色方块变形了。它是一个3x3表，其中单元格应为15px。但它显然已经被压扁了。

这是发生了什么（黑色表应该是一个完美的正方形。它适用于Outlook，但不适用于Gmail。

demonstration

以下是代码：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body, p, table, tr, td{
    font-size:1px; line-height:1px;border-spacing:0;
}

.MsoNormal{
    font-size:1px; line-height:1px
}
</style>
</head>
<body>
<style type="text/css">
body, p, table, tr, td{
    font-size:1px; line-height:1px;border-spacing:0;
}

.MsoNormal{
    font-size:1px; line-height:1px
}
</style>
<p>
<table align="left" cellpadding="0" cellspacing="0" border="0" style="background:#ffffff;border:0px;border-spacing:0;margin:0;padding:0;font-size:1px; line-height:1px;">
    <tr>
        <td valign="top" width="45" style="background:border:0px;border-spacing:0;margin:0;padding:0;font-size:1px; line-height:1px;">
            <table align="left" width="45" height="45" border="0" cellpadding="0" cellspacing="0" valign="top" style="font-size:1px; line-height:1px;border:0px;border-spacing:0;margin:0;padding:0;">
                <tr style="font-size:1px; line-height:1px;">
                    <td width="15" height="15" bgcolor="#000000" style="color: #000000; font-size: 1px; line-height: 1px;width:15px; height:15px;border-spacing:0;"><span style="font-size:1px; line-height:1px; color: #000000;">&nbsp;</span></td>
                    <td width="15" height="15" bgcolor="#000000" style="color: #000000; font-size: 1px; line-height: 1px;width:15px; height:15px;border-spacing:0;"><span style="font-size:1px; line-height:1px; color: #000000;">&nbsp;</span ></td>
                    <td width="15" height="15" bgcolor="#000000" style="color: #000000; font-size: p1x; line-height: 1px;width:15px; height:15px;border-spacing:0;"><span style="font-size:1px; line-height:1px; color: #000000;">&nbsp;</span ></td>
                </tr>
                <tr style="font-size:1px; line-height:1px;">
                    <td width="15" height="15" bgcolor="#000000" style="color: #000000; font-size: 1px; line-height: 1px;width:15px; height:15px;border-spacing:0;"><span style="font-size:1px; line-height:1px; color: #000000;">&nbsp;</span ></td>
                    <td width="15" height="15" style="color: transparent; font-size: 1px; line-height: 1px;width:15px; height:15px;border-spacing:0;"><span style="font-size:1px; line-height:1px; color: transparent;">&nbsp;</span ></td>
                    <td width="15" height="15" bgcolor="#000000" style="color: #000000; font-size: 1px; line-height: 1px;width:15px; height:15px;border-spacing:0;"><span style="font-size:1px; line-height:1px; color: #000000;">&nbsp;</span ></td>
                </tr>
                <tr style="font-size:1px; line-height:1px;">
                    <td width="15" height="15"bgcolor="#000000" style="color: #000000; font-size: 1px; line-height: 1px;width:15px; height:15px;border-spacing:0;"><span style="font-size:1px; line-height:1px; color: #000000;">&nbsp;</span ></td>
                    <td width="15" height="15"bgcolor="#000000" style="color: #000000; font-size: 1px; line-height: 1px;width:15px; height:15px;border-spacing:0;"><span style="font-size:1px; line-height:1px; color: #000000;">&nbsp;</span ></td>
                    <td width="15" height="15"bgcolor="#000000" style="color: #000000; font-size: 1px; line-height: 1px;width:15px; height:15px;border-spacing:0;"><span style="font-size:1px; line-height:1px; color: #000000;">&nbsp;</span ></td>
                </tr>
            </table>
        </td>
        <td width="10" style="background:border:0px;border-spacing:0;margin:0;padding:0;font-size:1px; line-height:1px;">&nbsp;</td>
        <td><p style="color: #1a1a1a; font-family: arial,sans-serif; font-size: 11px; line-height: 15px; margin-top: 0px; margin-bottom: 0px; padding: 0px;"><b>John Jenkins</b>
            <br />Consultant, Jenkins Consulting, LLC
            <br />325.552.9836 (w)&nbsp;&nbsp;|&nbsp;&nbsp;<a href="mailto:john.jenkins@jenkconsult.com" style="color: #1a1a1a;">john.jenkins@jenkconsult.com</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.jenkconsult.com" style="color: #1a1a1a;">http://www.jenkconsult.com</a></p>
        </td>
    </tr>
</table>
</p>
<br>
<br>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

HTML解释完全取决于您正在查看的Web客户端以及浏览器的引擎。简而言之，尝试找到解释事物的标准方式是一场噩梦，因为每个webmail客户端都有不同的规则和支持，每个浏览器都会以不同的方式显示它。

你最好的选择是使用正方形和HTML格式的图像，如图所示。否则，将看起来不同，这取决于电子邮件是否发送到GMail，Yahoo，Live等。

https://www.email-standards.org/clients/

特别检查“Gmail”部分。

此外，还有一些关于webclients和桌面客户端HTML / CSS支持的好读物：

http://templates.mailchimp.com/resources/email-client-css-support/

相关问题
最新问题