Outlook 2010/2013中的html无法正常呈现,但在html文件中正常工作

时间:2014-08-06 05:02:44

标签: html outlook html-email outlook-2010 email-client

Html文件在浏览器中运行良好,但未在outlook 2010/2013中正确触发。

有很多边距和间隙问题,即使边框不能用于img标记

任何帮助都会非常明显。你可以找到下面的代码:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      MESC 2014
    </title>
    <style type="text/css">
/*<![CDATA[*/
    .logo {
        text-align:right;
    }
    body{font-family:Arial; font-size:15px; line-height:1.5; }
    .padding15{padding:15px;}
    /*]]>*/
    </style>
  </head>
  <body>
    <table width="600" border="0" cellpadding="2" align="center">
      <tbody>
        <tr>
          <td colspan="2">
            &nbsp;
          </td>
          <td align="right" style="padding:10px 0 15px 0;">
            <a href="http://www.test.com"><img src=
            "http://test.com/test/testt/images/emailLogo.png"
            width="131" height="36" alt="" /></a>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            <table border="0" cellpadding="0" width="600" height=
            "160">
              <tbody>
                <tr>
                  <td>
                    <img src=
                    "http://test.com/test/testt/images/MESC%20banner%202014.jpg"
                    width="600" height="160" style=
                    "border-top: 1px solid #808080; border-bottom: 1px solid #808080; " />
                  </td>
                  <td>
                    &nbsp;
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td class="mktEditable" id='area1' colspan="3" style=
          "line-height:1.8; padding:20px 10px; border-bottom:1px solid #73716f">
          Hello Sir/Madam,<br />
            <br />
            Lorem lipsum Lorem lipsum Lorem lipsum .<br />
            <br />
            Lorem lipsum Lorem lipsum Lorem lipsum 
           Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum 
            Lorem lipsum Lorem lipsum.
          </td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:18px; padding:25px 10px"
          class="mktEditable" id='area2'>
          Lorem lipsum Lorem lipsum Lorem lipsum :
          </td>
        </tr>
        <tr>
          <td style="padding:0 20px;" width="80">
            <img src=
            "http://test.com/test/testt/images/MESC2014Visuals_11.png"
            width="63" height="61" alt=""style=";" />
          </td>
          <td colspan="3" style="padding:10px 0" width="400" class=
          "mktEditable" id='area3'>
            <strong>Our basecamp solutions:</strong><br />
            Lorem lipsum Lorem lipsum Lorem lipsum 
            Lorem lipsum Lorem lipsum Lorem lipsum 
            Lorem lipsum Lorem lipsum 
            Lorem lipsum.
          </td>
        </tr>
        <tr>
          <td style="padding:0 20px;" width="80">
            <img src=
            "http://test.com/test/testt/images/MESC2014Visuals_14.png"
            width="63" height="61" alt="" style=";" />
          </td>
          <td colspan="3" style="padding:10px 0" width="400" class=
          "mktEditable" id='area4'>
            <strong>Lorem lipsum :</strong><br />
           Lorem lipsum Lorem lipsum Lorem lipsum 
           Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum 
           Lorem lipsum Lorem lipsum Lorem lipsum 
           Lorem lipsum Lorem lipsum 
          </td>
        </tr>
        <tr>
          <td style="padding:0 20px;" width="80">
            <img src=
            "http://test.com/test/testt/images/MESC2014Visuals_16.png"
            width="63" height="69" alt=""style=";" />
          </td>
          <td colspan="3" style="padding:10px 0" width="400" class=
          "mktEditable" id='area9'>
            <strong>Lorem lipsum :</strong><br />
            Lorem lipsum Lorem lipsum Lorem lipsum 
            Lorem lipsum Lorem lipsum Lorem lipsum 
            Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum
            Lorem lipsum Lorem lipsum.
          </td>
        </tr>
        <tr>
          <td colspan="3" style=
          "font-size:18px; padding:20px 0 0 0;" class="mktEditable"
          id='area5'>
            <strong style=
            "color:#f7931e; text-transform:uppercase;">Lorem lipsum 
            Lorem lipsum .</strong><br />
          Lorem lipsum Lorem lipsum Lorem lipsum 
            Lorem lipsum Lorem lipsum 
           Lorem lipsum Lorem lipsum Lorem lipsum :
          </td>
        </tr>
        <tr>
          <td style="padding:0 20px;" width="80">
            <img src=
            "http://test.com/test/testt/images/MESC2014Visuals_18.png"
            width="63" height="59" alt="" style=";" />
          </td>
          <td colspan="3" style="padding: 30px 0 0;" width="400"
          class="mktEditable" id='area6'>
            <strong>3 p.m. Tuesday, Aug. 19:</strong><br />
          Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum 
          Lorem lipsum Lorem lipsum Lorem lipsum 
          Lorem lipsum Lorem lipsum Lorem lipsum 
          Lorem lipsum Lorem lipsum.
          </td>
        </tr>
        <tr>
            <col width="100px" />
            <col width="50px" />
          <td style="padding:0 20px;" width="100">
            <img src=
            "http://test.com/test/testt/images/MESC2014Visuals_18.png"
            width="63" height="59" style=";" alt="" />
          </td>
          <td colspan="3" style="padding: 30px 0 0;" width="500"
          class="mktEditable" id='area7'>
            <strong>Lorem lipsum Lorem lipsum 
            ICD-10:</strong><br />
          Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum 
          Lorem lipsum Lorem lipsum Lorem lipsum 
          Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum .<br />
            <br />
          Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum!
          </td>
        </tr>
        <tr>
          <td colspan="3" style=
          "color:#58595b; font-size:12px; text-align:justify; border-top:1px solid #73716f; padding-top:20px;">
          ABOUT Lorem lipsum <br />
           Lorem lipsum Lorem lipsum Lorem lipsum 
           Lorem lipsum Lorem lipsum Lorem lipsum 
           Lorem lipsum Lorem lipsum Lorem lipsum <br />
            Learn more about us at Lorem lipsum.com. <a href=
            'http://www.contactus.com' style=
            "color:#f7931e;">Contact us</a>.
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

1 个答案:

答案 0 :(得分:1)

你已经让自己变得非常复杂了。你应该很容易制作一个容器(100%)表,然后在其中嵌套其他表。就像在这里一样,你已经使用了几乎所有的tds作为colspan3,就像你上面一直在使用的那样。尝试嵌套表格。

我还希望您查看https://www.campaignmonitor.com/css/以获取电子邮件中的css支持。

我已经更新了代码,但请确保您使用嵌套表来最小化工作。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top">
        <table width="600" border="0" cellpadding="2" align="center">
            <tr>
              <td colspan="2">&nbsp;

              </td>
              <td align="right" style="padding:10px 0 15px 0;" valign="top">
                <a href="http://www.test.com"><img src=
                "http://lorempixel.com/131/36/abstract/4"
                width="131" height="36" alt="" /></a>
              </td>
            </tr>
            <tr>
              <td colspan="3">
                <table border="0" cellpadding="0" width="600" height=
                "160">
                  <tbody>
                    <tr>
                      <td style="border-top: 1px solid #808080; border-bottom: 1px solid #808080; padding:2px 0; ">
                        <img src=
                        "http://lorempixel.com/600/160/abstract/6"
                        width="600" height="160" />
                      </td>
                      <td>&nbsp;

                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td class="mktEditable" id='area1' colspan="3" style=
              "line-height:1.8; padding:20px 10px; border-bottom:1px solid #73716f" valign="top">
              Hello Sir/Madam,<br />
                <br />
                Lorem lipsum Lorem lipsum Lorem lipsum .<br />
                <br />
                Lorem lipsum Lorem lipsum Lorem lipsum 
               Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum 
                Lorem lipsum Lorem lipsum.
              </td>
            </tr>

            <tr>
              <td colspan="3" style="font-size:18px; padding:25px 10px"
              class="mktEditable" id='area2'>
              Lorem lipsum Lorem lipsum Lorem lipsum :
              </td>
            </tr>

            <tr>
                <td align="center" valign="top" colspan="4">
                    <table width="600" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td align="left" valign="top" style="padding:15px 0">
                            <img src="http://lorempixel.com/63/61/abstract/9" width="63" height="61" alt=""style=";" />
                        </td>
                        <td width="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
                        <td class="mktEditable" id='area3' valign="top" style="padding:15px 0">
                            <strong>Our basecamp solutions:</strong><br />
                            Lorem lipsum Lorem lipsum Lorem lipsum 
                            Lorem lipsum Lorem lipsum Lorem lipsum 
                            Lorem lipsum Lorem lipsum 
                            Lorem lipsum.
                          </td>
                      </tr>
                    </table>
                </td>
            </tr>

            <tr>
                <td align="center" valign="top" colspan="4">
                    <table width="600" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td align="left" valign="top" style="padding:15px 0">
                            <img src="http://lorempixel.com/63/61/abstract/9" width="63" height="61" alt=""style=";" />
                        </td>
                        <td width="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
                        <td class="mktEditable" id='area3' valign="top" style="padding:15px 0">
                            <strong>Our basecamp solutions:</strong><br />
                            Lorem lipsum Lorem lipsum Lorem lipsum 
                            Lorem lipsum Lorem lipsum Lorem lipsum 
                            Lorem lipsum Lorem lipsum 
                            Lorem lipsum.
                          </td>
                      </tr>
                    </table>
                </td>
            </tr>

            <tr>
              <td colspan="3" style=
              "font-size:18px; padding:20px 0;" class="mktEditable"
              id='area5'>
                <strong style=
                "color:#f7931e; text-transform:uppercase;">Lorem lipsum 
                Lorem lipsum .</strong><br />
              Lorem lipsum Lorem lipsum Lorem lipsum 
                Lorem lipsum Lorem lipsum 
               Lorem lipsum Lorem lipsum Lorem lipsum :
              </td>
            </tr>
            <tr>
                <td align="center" valign="top" colspan="4">
                    <table width="600" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td align="left" valign="top" style="padding:15px 0">
                            <img src="http://lorempixel.com/63/61/abstract/9" width="63" height="61" alt=""style=";" />
                        </td>
                        <td width="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
                        <td class="mktEditable" id='area3' valign="top" style="padding:15px 0">
                            <strong>Our basecamp solutions:</strong><br />
                            Lorem lipsum Lorem lipsum Lorem lipsum 
                            Lorem lipsum Lorem lipsum Lorem lipsum 
                            Lorem lipsum Lorem lipsum 
                            Lorem lipsum.
                          </td>
                      </tr>
                    </table>
                </td>
            </tr>
           <tr>
                <td align="center" valign="top" colspan="4">
                    <table width="600" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td align="left" valign="top" style="padding:15px 0">
                            <img src="http://lorempixel.com/63/61/abstract/9" width="63" height="61" alt=""style=";" />
                        </td>
                        <td width="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
                        <td class="mktEditable" id='area3' valign="top" style="padding:15px 0">
                            <strong>Our basecamp solutions:</strong><br />
                            Lorem lipsum Lorem lipsum Lorem lipsum 
                            Lorem lipsum Lorem lipsum Lorem lipsum 
                            Lorem lipsum Lorem lipsum 
                            Lorem lipsum.
                          </td>
                      </tr>
                    </table>
                </td>
            </tr>
           <tr>
                <td align="center" valign="top" colspan="4">
                    <table width="600" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td align="left" valign="top" style="padding:15px 0">
                            <img src="http://lorempixel.com/63/61/abstract/9" width="63" height="61" alt=""style=";" />
                        </td>
                        <td width="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
                        <td class="mktEditable" id='area3' valign="top" style="padding:15px 0">
                            <strong>Our basecamp solutions:</strong><br />
                            Lorem lipsum Lorem lipsum Lorem lipsum 
                            Lorem lipsum Lorem lipsum Lorem lipsum 
                            Lorem lipsum Lorem lipsum 
                            Lorem lipsum.
                          </td>
                      </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
  </tr>
</table>