将在Outlook 2007/2010中正确呈现的HTML

我当前使用以下HTML呈现下面显示的图像。然而，这在Outlook中不起作用，因为不支持背景图像。我已经倾向于使用表格来正确地在Outlook中呈现元素，但不知道如何去做这件事。 200赏金谁提供了HTML的人将在下面正确地呈现图像在Outlook 2007/2010"将在Outlook 2007/2010中正确呈现的HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Render this</title> 
    <style type="text/css"> 
     div, p { 
      margin:0; 
      padding:0; 
      font-family: Helvetica; 
      font-size:14px; 
      color:#000; 
      font-weight:bold; 
     } 
     div.box { 
      padding:15px; 
      width:272px; 
      height:155px; 
      border:2px solid #000; 
      background-color:rgb(255,232,0); 
     } 
     div.box div.inner { 
      height:100%; 
      background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat; 
     } 
     p.name { 
      margin-bottom:65px; 
     } 
    </style> 
</head> 
<body> 
    <div class="box"> 
     <div class="inner"> 
      <p class="name">John</p> 
      <p>XYZ Company</p> 
     </div> 
    </div> 
</body> 
</html>

enter image description here

来源

2012-04-14 RunLoop

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Render this</title> 
    <style type="text/css"> 
     p { 
      margin:0; 
      padding:0; 
      font-family: Helvetica; 
      font-size:14px; 
      color:#000; 
      font-weight:bold; 
     } 
     table { 
      padding:15px; 
      width:272px; 
      height:155px; 
      border:2px solid #000; 
      background-color: #fee800; 
     } 
     p.name { 
      margin-bottom:65px; 
     } 
    </style> 
</head> 
<body> 
<table> 
<tr><td>John Smith</td><td></td></tr> 
<tr><td><p>XYZ Company</p></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" /></td></tr> 
</table> 

</body> 
</html>

来源

2012-04-14 20:21:56 chadpeppers

是在安全方面就像我在上面的例子一样，我会用HTML电子邮件表格。这是允许的HTML标记的链接电子邮件：http ：//www.campaignmonitor.com/css/ – chadpeppers 2012-04-14 20:23:39

+1表格（从来没有想过我会这么说）。可悲的电子邮件客户端不喜欢div。 – 2012-04-17 20:25:39

我也建议使用内联CSS。由于webapp有自己的特性，因此html头部的内容在大多数webmail客户端中很可能会被忽略。我认为Mailchimp提供了一个在线解析器，可以将样式表转换为内联，因为使用内联样式编写更长的HTML会很尴尬。 – Halka 2013-03-26 15:16:33

对于电子邮件使用者你应该使用表，不使用CSS在头部或不同的CSS，尽量使用内联CSS。

<table bgcolor="#fee800" border="0" cellpadding="0" cellspacing="0" width="272" height="155" style="border: 2px solid #000; padding: 15px;"> 
    <tr> 
     <td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>John</b></font></td><td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>XYZ Company</b></font></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="" /></td> 
    </tr> 
</table>

来源

2012-04-17 07:48:16 Tarun

将在Outlook 2007/2010中正确呈现的HTML

回答

相关问题