HTML,如何正确编写MS Outlook简报的图像格式和表格代码?

时间:2017-06-19 14:12:54

标签: html css image outlook newsletter

我正在做一份新闻通讯,其中大多数收件人都会使用Outlook,我遇到了两个主要问题。

首先,根据计算机,我得到一个不同的显示图像,如截图:

当我将图像的宽度值更改为750时,它可以在我的计算机上运行,​​但对我的同事来说太宽了:https://i.stack.imgur.com/QZxLf.png

当我将值更改为600(它应该如何)时,反转的情况会发生,对我来说太狭隘了,对她来说是完美的:https://i.stack.imgur.com/aFPGo

这是代码:

<table class="baemail320resize" align="center" border="0" cellpadding="" cellspacing="0" style="height:350; max-height: 350px; max-width:600px; border-bottom: none!important;border-right: none !important;" width="600" height="350">
  <tr>
    <td bgcolor="#333333" height="350" background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" style="display:block; background-repeat: no-repeat; padding: 0;" valign="middle;" width="auto"><!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 350px;">
    <v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
      <table class="baemail320resize" valign="middle" align="center"  border="0" cellpadding="" cellspacing="15" style="height:350px; vertical-align:middle; max-height: 350px; max-width:600px; border-bottom: none; border-right: none ;" width="600">
               <tr>
          <td></td>
        </tr>
        <tr>
          <td align="center" href="www.bdforum.org" ><img align="center" alt="LOGO" height="47px" href="www.bdforum.org" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" style="display:block;" width="88px"></td>
        </tr>
        <tr>
          <td></td>
        </tr>
        <tr>
          <td align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff ;text-decoration:none; ">
            <anpa href="##TellAFriend##" style="color: #fffff6 ; text-decoration:none;">FORWARD &nbsp;&nbsp;</anpa>
            <anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="color: #fffff6 ; text-decoration:none;text-align: center;">SUBSCRIBE &nbsp;&nbsp;</anpa>
            <anpa href="##OptOutAll##" style="color: #fffff6; text-decoration:none;">UNSUBSCRIBE</anpa>
            <br>
            </font></td>
        </tr>
        <tr>
          <td align="center" valign="middle" width="600" style="padding: 1em;"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 20px; color: #ffffff !important;">
            <anpa href="http://www.bdforum.org" style="color: #fffff6;">BALTIC DEVELOPMENT FORUM</anpa>
            </font></td>
        </tr>
        <tr>
          <td align="center" style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important; ">LATEST BDF NEWS ESPECIALLY FOR YOU</td>
        </tr>
        <tr>
          <td></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:25px;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>
  <tr>
    <td><img src="http://customers.anpdm.com/shared/images/pixel.gif" width="1" height="20" style="display:block;"></td>
  </tr>
</table>

此外,还有另一个案例,其中包含了一个社交媒体面板,它可以在我的电子书上工作(它保持了我在代码中设置的宽度): https://i.stack.imgur.com/iWbIn.png

但不是她的(它太宽,图标增长): https://i.stack.imgur.com/NM0pS.png

代码:

<table class="baemail320resize" align="center" border="0" cellpadding="" cellspacing="0" style="max-height:60px; max-width:600px; border-bottom: none!important;border-right: none !important;" width="600" height="auto">
  <tr>
    <td><table class="baemail320resize" valign="middle" align="center"  border="0" cellpadding="" cellspacing="0" style="max-height:60px; vertical-align:middle; max-width:600px; border-bottom: none; border-right: none ;" width="600">
        <tr>
          <td align="center" valign="middle" class="baemailwidthcollapse"><img src="http://customers.anpdm.com/shared/images/pixel.gif"       align="center" link="" height="1" width="20" style="max-height:1; max-width: 20px;"></td>
          <!-- EMPTY -->
          
          <td align="center" valign="middle" href="https://www.facebook.com/bdforum.org"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset1x3.png" href="https://www.facebook.com/bdforum.org" link="https://www.facebook.com/bdforum.org" alt="FACEBOOK" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td>
          <!-- FACEBOOK -->
          <td align="center" valign="middle" href="https://twitter.com/bdforumorg"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset2x3.png" href="https://twitter.com/bdforumorg" link="https://twitter.com/bdforumorg" alt="TWITTER" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td>
          <!-- TWITTER -->
          <td align="center" valign="middle" href="https://www.youtube.com/user/balticdevforum"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset3x3.png" href="https://www.youtube.com/user/balticdevforum" link="https://www.youtube.com/user/balticdevforum" alt="YOU TUBE" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td>
          <!-- YOU TUBE -->
          <td align="center" valign="middle" href="https://www.flickr.com/photos/baltic-development-forum"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset4x3.png" href="https://www.flickr.com/photos/baltic-development-forum" link="https://www.flickr.com/photos/baltic-development-forum" alt="FLICKR" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td>
          <!-- FLICKR -->
          <td align="center" valign="middle" href="https://www.linkedin.com/company/baltic-development-forum"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset5x3.png" href="https://www.linkedin.com/company/baltic-development-forum" link="https://www.linkedin.com/company/baltic-development-forum" alt="LINKED IN" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td>
          <!-- LINKED IN -->
          
          <td align="center" valign="middle" class="baemailwidthcollapse"><img src="http://customers.anpdm.com/shared/images/pixel.gif"       align="center" link="" height="1" width="20" style="max-height:1; max-width: 20px;"></td>
          <!-- EMPTY --> 
        </tr>
      </table>
  <tr>
    <td><img src="http://customers.anpdm.com/shared/images/pixel.gif" width="1" height="20" style="display:block;"></td>
  </tr>
  </td>
  
  </tr>
  
</table>

我很欣赏关于如何摆脱这些问题的每一个小提示或想法,我相信我已经尝试了所有我能够做到的一切,特别是它可以在任何地方工作,但有些看起来PC客户端,你可以看到here

很抱歉很长的帖子,并提前感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

如果您运行的图像宽度远小于实际所需的输出,那么Outlook并不是非常喜欢它。我无法让你的图像在表格单元格的背景中平铺。

您的背景代码有点混乱。我把它清理了一下。试试这个:

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
</v:background>
<![endif]-->

尝试这样的事情:

<div style="background-color:#ff0000;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#7bceeb"/>
  </v:background>
   <![endif]-->
  <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
  <td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
      </td>
    </tr>
  </table>
</div>

尝试使用此工具格式化图片:https://backgrounds.cm/

另外,您没有包含样式表和元标记等<head>信息。

您提供的表格结构不是很敏感。在IOS设备中,有一半的电子邮件被切断了。

最后,Outlook的最大大小为800px。您越接近该宽度,您使用不同版本的Outlook时遇到的问题就越多。

祝你好运。