HTML，如何正确编写 MS Outlook 通讯的图像格式和表格代码？

Question

我正在做一个时事通讯，大多数收件人都会使用 Outlook，我遇到了 2 个主要问题。

首先，根据计算机的不同，我会得到不同的显示图像，如屏幕截图所示：

当我将图像的宽度值更改为 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>

我将不胜感激关于如何摆脱这些问题的每一个小提示或想法，我相信我已经尝试了所有我能够做的事情，尤其是它可以在任何地方工作，但是一些 Outlook PC 客户端，你可以看到here。

抱歉发了这么长的帖子，提前感谢您的帮助！

Answer 1

如果您运行的图像宽度远小于实际所需的输出，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 的最大尺寸为 800 像素。您越接近该宽度，您在使用不同版本的 Outlook 时遇到的问题就越多。

祝你好运。