iPad的电子邮件模板问题

所以，我有这样的HTML邮件：iPad的电子邮件模板问题

<!Doctype HTML><html> 
<head> 
    <!-- Meta --> 
    <meta charset="utf-8"> 
</head> 
<table style=" width: 100%; box-shadow: 0px 0px 5px 0px #a5a5a5;"> 
    <tr class="header"> 
     <td class="logo" style="padding-top: 10px; padding-left: 20px;"> 
      <img src="header_logo.png" alt="Logoimage"/> 
     </td> 
    </tr> 
</table> 
<table style="width: 100%; box-sizing: border-box; box-shadow: 0px 1px 5px 0px #a5a5a5;"> 
    <tr style="width: 100%; display: block;"> 
     <td style=""><h2>Congratulations on your new website!</h2></td> 
     <td class="content" style="margin-top:20px; display: block; clear:both; min-width: 100%;"> 
      General description here.. write whatever you want. 
     </td> 
    </tr> 
    <tr style="width: 100%; display: block;"> 
     <td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; margin-bottom: 10px; width: 100%; display: block;"><h2>Account information</h2></td> 
     <td class="content" style="margin-top:20px; width:100%; display: block;"> 
      <h3 style="margin: 0">First name:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_FIRST_NAME!!</span></h3> 
      <h3 style="margin: 0">Last name:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_LAST_NAME!!</span></h3> 
      <h3 style="margin: 0">Email:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_EMAIL!!</span></h3> 
      <h3 style="margin: 0">Phone:<span style="font-weight: normal; margin-left: 10px;">!!PHONE!!</span></h3> 
     </td> 
     <td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; width: 100%"><h2>Property information</h2></td> 
     <td class="content" style="margin-top:20px; width: 100%; display: block;"> 
      <h3 style="margin: 0">Listing Site:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_IS_LISTED!!</span></h3> 
      <h3 style="margin: 0">Listing Number:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_ID!!</span></h3> 
      <h3 style="margin: 0">Property Name:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_NAME!!</span></h3> 
      <h3 style="margin: 0">Address:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STREET_ADDRESS!!</span></h3> 
      <h3 style="margin: 0">City:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_CITY!!</span></h3> 
      <h3 style="margin: 0">State:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STATE!!</span></h3> 
      <h3 style="margin: 0">Country:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STATE!!</span></h3> 
     </td> 
    </tr> 
    <tr style="margin-top: 10px; padding-bottom:5px; width: 100%; display: block;"> 
     <td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; margin-bottom: 10px; display: block;"><h2>your site</h2></td> 
     <td class="content" style="margin-top:20px; display: block;"> 
      <h3 style="margin: 0">Site URL:<span style="font-weight: normal; margin-left: 10px;">!!SITE_URL!!</span></h3> 
      <h3 style="margin: 0">Design name:<span style="font-weight: normal; margin-left: 10px;">!!DESIGN_NAME!!</span></h3> 
      <img style="width:100%; margin-top: 20px;" src="http://vsbtest.com/Latestwizard/images/designs/design3.jpg" alt="Site template preview"/> 
     </td> 
    </tr> 
</table> 
<table style="width: 100%; height: 55px; background: #fff; z-index:5; box-shadow: 0px 1px 5px 0px #a5a5a5;"> 
    <tr class="copyright"> 
     <td style="padding-top: 10px; padding-left: 20px; display: block; clear:both;">&copy; 2013</td> 
    </tr> 
</table></html>

并显示，因为我想（全宽表格单元格）上主要的电子邮件客户端 - Gmail中，雷鸟，Android版Gmail应用，但是当使用从iPad的电子邮件应用程序它不工作好..它不“采取”100％的宽度，并把所有的表格单元格放在一行。我知道我可以通过在单独的行中轻松添加每个单元格来解决此问题，但除非没有其他解决方案，否则我不想要这样做。

你有什么想法为什么会发生这种情况？我不明白为什么。它应该看起来像这样：http://jsfiddle.net/6YqmL/1/

来源

2013-10-07 Răzvan Nechifor

您使用不正确的HTML。你必须添加一个'' - 标签。请首先检查您的html的有效性（例如W3c验证程序）。 – urzeit

这个问题似乎是题外话题，因为它是一个错字。 – 2013-10-07 13:45:53

这不是一个错字。我不好意思，我忘了在代码中添加标签，但这没有什么区别。无论有没有标记，效果都是一样的。 –

html-email中不一致地支持标头标签。而不是使用<h3>，请尝试在表格单元格或字体标签中对它们进行造型，并使用双<br>将它们分开。

来源

2013-10-07 14:03:35 John

iPad的电子邮件模板问题

回答

相关问题