2015-12-21 18 views
0

我正在为Outlook创建HTML电子邮件签名。我创建了代码并将其添加到我的签名中,但我遇到了一个问题。我试图创建的简单的黑色方块会变形。这是一个3x3的表,其中单元格应该是15px。但它显然正在被挤压。当Outlook在Outlook中工作时,如何阻止此表格扩展Gmail?

这里发生了什么(黑表应该是一个完美的正方形它可以在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:[email protected]" style="color: #1a1a1a;">[email protected]</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>

回答

0

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

最好的办法是使用正方形和HTML格式的图片,如图所示。否则事情会根据如果电子邮件被发送到Gmail,雅虎,现场等

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

特别检查出的Gmail“部分会有所不同。

此外,一些良好的阅读有关Web客户和桌面客户端HTML/CSS支持:

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

+0

我已经使用图像考虑,但它们对于Outlook用户痛苦。我正在寻找一种创建相同图形的方式,而不必依赖图像。我将检查电子邮件标准链接。 –

相关问题