2017-05-08 63 views
1

我很努力地找出问题可能与我的新闻通讯标题。它有时在我测试时可以正常工作,但最轻微的变化会改变一切,我甚至无法注意到导致错误的原因。Outlook通讯不希望正确显示HTML CSS

下面是代码,并显示我的问题是什么图片:

<table cellpadding="" cellspacing="0" border="0" vallign="top" align="center" style="height:auto; max-width=600px; border-bottom: none!important;border-right: none !important;" > 
 
    <tr> 
 
    <td background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" max-width="600px" height="440px" alt="Lighouse in Germany" bgcolor="#333333" style="display:block; background-repeat: no-repeat; padding: 0;width: 100%;" valign="middle;"> 
 
    <!--[if gte mso 9]> 
 
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="max-width: 600px; max-height: 440px;"> 
 
    <v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" /> 
 
    <v:textbox inset="0,0,0,0"> 
 
    <![endif]--> 
 
     <table border="0" cellpadding="0" cellspacing="30" style="max-width:600px;"> 
 
     <tr> 
 
      <td align="center" > 
 
      <br> 
 
      <img alt="" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" width="88px" height="47px" align="center" link="" style="display:block;"/> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td align="center" valign="middle"> 
 
      <font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;"> 
 
      <anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none; padding-right: 1em;"> 
 
      WEBSITE</anpa> 
 
      <anpa href="##TellAFriend##" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;"> 
 
      FORWARD</anpa> 
 
      <anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;"> 
 
      SUBSCRIBE</anpa> 
 
      <anpa href="##OptOutAll##" style="font-weight:none;color: #ffffff; text-decoration: none;"> 
 
      UNSUBSCRIBE<br> 
 
      </anpa></font> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td width="600px" align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;"> 
 
      <anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none;"> 
 
      Baltic Development Forum</anpa></font></td> 
 
     </tr> 
 
     
 
     <tr> 
 
\t \t \t <td align="center"> 
 
\t \t \t <font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;"> 
 
\t \t \t 
 
\t \t LATEST BDF NEWS ESPECIALLY FOR YOU 
 
\t \t \t </font></td> 
 
     </tr> 
 
     
 
     <tr> 
 
     <br> 
 
     <td align="center">   \t 
 
     \t <div><!--[if mso]> 
 
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.bdforum.org" style="height:35px;v-text-anchor:middle;width:160px;" arcsize="58%" stroke="f" fillcolor="#d1003e"> 
 
    <w:anchorlock/> 
 
    <center> 
 
    <![endif]--> 
 
     <a href="http://www.bdforum.org" 
 
style="background-color:#d1003e;border-radius:20px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">WEBSITE</a> 
 
    <!--[if mso]> 
 
    </center> 
 
    </v:roundrect> 
 
<![endif]--></div> 
 
\t \t \t </td> 
 
     </tr> 
 
     </table> 
 
     <!--[if gte mso 9]> 
 
    </v:textbox> 
 
    </v:rect> 
 
    <![endif]--></td> 
 
    </tr> 
 
</table>

这里走的图片:

我想实现

什么

当我在outlook中打开它时会发生什么

显然,它工作在所有的其它邮件 “客户端”,例如。 Gmail中。 我有点绝望在这一点上...

回答

0

下面我清理你的代码。由于Outlook不支持max-width,我添加了几个width="100%" s和width="600" s。我也移动了所有的CSS内联style属性。

这两个<!--[if gte mso 9]>(用于背景图像和按钮)块没有相处。我得到了他要显示的背景图片,但按钮的VML部分会出现在块的左上角。删除按钮的VML部分可修复布局,但会丢失Windows Outlook中按钮的边框半径(arcsize)(border-radius涵盖大多数其他电子邮件客户端)。

无处不在的像素,但希望这是一个正确的方向迈出的一步!

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <table align="center" border="0" cellpadding="" cellspacing="0" style="height:auto; max-width:600px; border-bottom: none!important;border-right: none !important;" width="600"> 
 
     <tr> 
 
      <td bgcolor="#333333" height="440" background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" style="display:block; background-repeat: no-repeat; padding: 0;" valign="middle;" width="100%"> 
 
       <!--[if gte mso 9]> 
 
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 440px;"> 
 
    <v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" /> 
 
    <v:textbox inset="0,0,0,0"> 
 
    <![endif]--> 
 
       <table border="0" cellpadding="0" cellspacing="30" style="max-width:600px;" width="100%"> 
 
        <tr> 
 
         <td align="center"><br> 
 
         <img align="center" alt="" height="47px" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" style="display:block;" width="88px"></td> 
 
        </tr> 
 
        <tr> 
 
         <td align="center" valign="middle"><font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">WEBSITE FORWARD SUBSCRIBE UNSUBSCRIBE<br></font></td> 
 
        </tr> 
 
        <tr> 
 
         <td align="center" valign="middle" width="600px"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">Baltic Development Forum</font></td> 
 
        </tr> 
 
        <tr> 
 
         <td align="center" style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">LATEST BDF NEWS ESPECIALLY FOR YOU</td> 
 
        </tr> 
 
        <tr> 
 
         <td align="center"> 
 
           
 
          <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="160" style="margin: auto;"> 
 
           <tr> 
 
            <td style="border-radius: 30px; background: #d1003e; text-align: center;"> 
 
             <a href="http://www.bdforum.org" style="background-color:#d1003e;border: 5px solid #d1003e; border-radius:30px;color:#ffffff;display:block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;"> 
 
              <span style="color:#ffffff;">WEBSITE</span> 
 
             </a> 
 
            </td> 
 
           </tr> 
 
          </table> 
 
           
 
         </td> 
 
        </tr> 
 
       </table><!--[if gte mso 9]> 
 
    </v:textbox> 
 
    </v:rect> 
 
    <![endif]--> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</body> 
 
</html>

+0

谢谢sooo多! –

0

从一个小小的研究,似乎Outlook 2007及以后没有能力显示设置使用“背景图像”的图像。但是,您可以使用标签。

退房此线程的详细信息: Background images not working in Outlook 2007 and later

+0

您发布的评论是不是真的对我有利寿哈哈。也许我应该重新考虑它的设计 –