Question

我使用网络上发现的各种不同的基于条件评论的“防弹按钮”编写了多年的HTML电子邮件。大多数情况下这些工作正常但我在Outlook 2007中遇到了特殊问题。在我的所有测试中，电子邮件功能正常但在Outlook 2007中，条件注释按钮之间的内容是不可见的。电子邮件的顶部标题部分很好，直到第一个按钮结束。然后电子邮件是空白的（但似乎是正确的布局），直到正确显示的下一个按钮。这种情况发生在整个电子邮件中，只显示按钮，其间的代码为空白。

条件似乎有些重叠，或者没有正确关闭。但我无法看到代码中发生的情况。

我尝试了很多不同的按钮类型，但这些似乎具有最佳的整体兼容性，只是Outlook 2007就是这里的问题。

非常感谢任何帮助。

0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>test</title>
<style type="text/css">
html, body {
    -webkit-text-size-adjust: none;
}
a[href^="tel"] {
    color: #FFFFFF;
    text-decoration: underline;
}
 @media screen and (max-width: 595px) {
*[class=responsive] {
    width: 100%!important;
}
*[class=invisible] {
    display: none!important;
}
*[class=mobile_show_table] {
    display: table!important;
    font-size: inherit!important;
    max-height: none!important;
    max-width: none!important;
    line-height: normal!important;
    mso-hide: none!important;
    width: 100%!important;
}
*[class=mobile_show_row] {
    display: table-row!important;
    font-size: inherit!important;
    max-height: none!important;
    max-width: none!important;
    line-height: normal!important;
    mso-hide: none!important;
    width: 100%!important;
}
*[class=mobile_show_cell] {
    display: table-cell!important;
    font-size: inherit!important;
    max-height: none!important;
    max-width: none!important;
    line-height: normal!important;
    mso-hide: none!important;
}
*[class=mobile_show_text] {
    display: table-cell!important;
    font-family: Arial, Helvetica, sans-serif!important;
    font-size: 14px!important;
    line-height: 18px!important;
    color: #FFFFFF!important;
    text-align: center!important;
    mso-hide: none!important;
}
*[class=mobile_show_title] {
    display: table-cell!important;
    font-family: Arial, Helvetica, sans-serif!important;
    font-size: 39px!important;
    font-weight: bold!important;
    line-height: 41px!important;
    color: #FFFFFF!important;
    text-align: center!important;
    mso-hide: none!important;
}
*[class=mobile_show_img] {
    display: block!important;
    width: 100%!important;
    max-width: 600px!important;
    font-size: inherit!important;
    max-height: none!important;
    max-width: none!important;
    line-height: normal!important;
    mso-hide: none!important;
}
*[class=mobile_show_limited] {
    width: 50%!important;
    display: table-cell!important;
    background-color: #FFFFFF!important;
    border: 2px solid #FF0000!important;
    padding: 5px 10px!important;
    font-family: Arial, Helvetica, sans-serif!important;
    font-size: 12px!important;
    line-height: 12px!important;
    text-align: center!important;
    color: #FF0000!important;
    max-height: none!important;
    max-width: none!important;
    mso-hide: none!important;
}
*[class=mobile_show_limited_text] {
    width: 50%!important;
    display: table-cell!important;
    font-family: Arial, Helvetica, sans-serif!important;
    font-size: 12px!important;
    line-height: 16px!important;
    color: #FFFFFF!important;
    text-align: center!important;
    max-height: none!important;
    max-width: none!important;
    mso-hide: none!important;
}
</style>
</head>
<body style="margin: 0; padding: 0; background-color:#e8eaea;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color: #e8eaea;">
  <tr>
    <td width="100%" style="background-color: #e8eaea;"><!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->

      <table width="600" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto 0 auto; background-color: #FFFFFF;" class="responsive">
        <tr>
          <td width="600" class="responsive" style="background-color:#FFFFFF; border-bottom: 5px solid #1cadda"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td width="4%">&nbsp;</td>
                  <td width="92%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td width="100%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tbody>
                                <tr>
                                  <td width="45%" class="invisible"><a href="%url%" target="_blank"><img src="images/taste.gif" width="188" height="79" alt="" border="0" style="display: block;"/></a></td>
                                  <td width="10%"><a href="%url%" target="_blank"><img src="images/logo.gif" width="61" height="79" alt="" border="0" style="display: block;"/></a></td>
                                  <td width="45%"><div style="margin: 0 0 0 auto;"><!--[if mso]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="%url%" style="height:30px; v-text-anchor:middle; width:150px;"fill="t">
    <v:fill type="tile" color="#FFFFFF" />
    <w:anchorlock/>
    <center style="color:#1cadda;font-family:sans-serif;font-size:7px;">Lorem ipsum dolor</center>
  </v:rect>
<![endif]-->
                                      <div style="margin: 0 0 0 auto;mso-hide:all;">
                                        <table align="right" cellpadding="0" cellspacing="0" height="30" width="150" style="margin: 0 0 0 auto; mso-hide:all;">
                                          <tbody>
                                            <tr>
                                              <td align="center" bgcolor="#FFFFFF" height="30" style="vertical-align:middle;color: #1cadda; display: block; mso-hide:all;" width="150"><a href="%url%" style="font-size:14px;-webkit-text-size-adjust:none; font-family:sans-serif; text-decoration: none; line-height:30px; width:150px; display:inline-block; border: 1px solid #1cadda;" title="Button"><span style="color:#1cadda">Lorem ipsum dolor</span></a></td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </div>
                                    </div></td>
                                </tr>
                              </tbody>
                            </table></td>
                        </tr>
                      </tbody>
                    </table></td>
                  <td width="4%">&nbsp;</td>
                </tr>
              </tbody>
            </table></td>
        </tr>
        <tr>
          <td width="600" class="responsive" style="background-color:#ffae02;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td width="96%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td width="100%">&nbsp;</td>
                        </tr>
                        <tr class="invisible">
                          <td width="100%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tbody>
                                <tr>
                                  <td width="45%"><a href="%url%" target="_blank"><img src="images/main_image.jpg" width="293" height="488" alt="" border="0" style="display: block;"/></a></td>
                                  <td width="55%" style="vertical-align: top;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                      <tbody>
                                        <tr>
                                          <td style="font-family: Arial, Helvetica, sans-serif; font-size: 39px; line-height: 41px; color: #FFFFFF; text-transform: uppercase;"><strong>Lorem ipsum dolor sit</strong></td>
                                        </tr>
                                        <tr>
                                          <td style="height: 12px; font-size: 12px; line-height: 12px;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 18px; color: #FFFFFF;"><strong>Dear ABCDEF,</strong></td>
                                        </tr>
                                        <tr>
                                          <td style="height: 12px; font-size: 12px; line-height: 12px;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 18px; color: #FFFFFF;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada risus augue, eget scelerisque enim condimentum ac. Morbi eget pulvinar tortor, vitae pretium neque.</td>
                                        </tr>
                                        <tr>
                                          <td style="height: 12px; font-size: 12px; line-height: 12px;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 18px; color: #FFFFFF;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada risus augue, eget scelerisque enim condimentum ac. Morbi eget pulvinar tortor, vitae pretium neque.</td>
                                        </tr>
                                        <tr>
                                          <td style="height: 18px; font-size: 18px; line-height: 18px;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td><div style="margin: 0 auto 0 auto;"><!--[if mso]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="%url%" style="height:45px; v-text-anchor:middle; width:195px;"fill="t">
    <v:fill type="tile" color="#1cadda" />
    <w:anchorlock/>
    <center style="color:#FFFFFF;font-family:sans-serif;font-size:18px;">ORDER NOW</center>
  </v:rect>
<![endif]-->
                                              <div style="margin: 0 auto 0 0;mso-hide:all;">
                                                <table align="left" cellpadding="0" cellspacing="0" height="45" width="195" style="margin: 0 auto; mso-hide:all;">
                                                  <tbody>
                                                    <tr>
                                                      <td align="center" bgcolor="#1cadda" height="45" style="vertical-align:middle;color: #FFFFFF; display: block; mso-hide:all;" width="195"><a href="%url%" style="font-size:18px;-webkit-text-size-adjust:none; font-family:sans-serif; text-decoration: none; line-height:45px; width:195px; display:inline-block; font-weight: bold;" title="Button"><span style="color:#FFFFFF">ORDER NOW</span></a></td>
                                                    </tr>
                                                  </tbody>
                                                </table>
                                              </div>
                                            </div></td>
                                        </tr>
                                        <tr>
                                          <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-block;">
                                              <tbody>
                                                <tr>
                                                  <td style="background-color: #FFFFFF; border: 2px solid #FF0000; padding: 5px 10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 12px; color: #FF0000;">Limited time offer</td>
                                                  <td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 12px; color: #FFFFFF; padding: 5px;">Ends XX/XX/XX</td>
                                                </tr>
                                              </tbody>
                                            </table></td>
                                        </tr>
                                        <tr>
                                          <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td><img src="images/payment_methods.jpg" width="229" height="47" alt=""/></td>
                                        </tr>
                                        <tr>
                                          <td>&nbsp;</td>
                                        </tr>
                                      </tbody>
                                    </table></td>
                                </tr>
                              </tbody>
                            </table></td>
                        </tr>
                      </tbody>
                    </table></td>
                  <td width="4%">&nbsp;</td>
                </tr>
              </tbody>
            </table></td>
        </tr>

        <!--[if !mso]><!-->
        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all; background-color: #ffae02">
          <td width="100%" class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile_show_table" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
              <tbody class="mobile_show_table" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                  <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">&nbsp;</td>
                  <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile_show_table" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                      <tbody class="mobile_show_table" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_title" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;"><img src="images/mobile_main_image.jpg" class="mobile_show_img" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;" alt=""/></td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_title" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">LOREM IPSUM DOLOR SIT</td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">&nbsp;</td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_text" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada risus augue, eget scelerisque enim condimentum ac. Morbi eget pulvinar tortor, vitae pretium neque.</td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">&nbsp;</td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_text" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada risus augue, eget scelerisque enim condimentum ac. Morbi eget pulvinar tortor, vitae pretium neque.</td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">&nbsp;</td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;"><div style="margin: 0 auto 0 auto;"><!--[if mso]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="%url%" style="height:45px; v-text-anchor:middle; width:195px;"fill="t">
    <v:fill type="tile" color="#1cadda" />
    <w:anchorlock/>
    <center style="color:#FFFFFF;font-family:sans-serif;font-size:18px;">ORDER NOW</center>
  </v:rect>
<!--[if mso]>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="0" style="line-height: 0; font-size: 0; max-height: 0;">
</td>
</tr>
</table>
<![endif]-->
                              <div style="margin: 0 auto 0 auto;mso-hide:all;">
                                <table align="center" cellpadding="0" cellspacing="0" height="45" width="195" style="margin: 0 auto; mso-hide:all;">
                                  <tbody>
                                    <tr>
                                      <td align="center" bgcolor="#1cadda" height="45" style="vertical-align:middle;color: #FFFFFF; display: block; mso-hide:all;" width="195"><a href="%url%" style="font-size:18px;-webkit-text-size-adjust:none; font-family:sans-serif; text-decoration: none; line-height:45px; width:195px; display:inline-block; font-weight: bold;" title="Button"><span style="color:#FFFFFF">ORDER NOW</span></a></td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>
                            </div></td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">&nbsp;</td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;"><table width="80%" border="0" cellspacing="0" cellpadding="0" class="mobile_show_table" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all; margin: 0 auto;">
                              <tbody class="mobile_show_table" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                                <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                                  <td class="mobile_show_limited" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">Limited time offer</td>
                                  <td class="mobile_show_limited_text" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">Ends XX/XX/XX</td>
                                </tr>
                              </tbody>
                            </table></td>
                        </tr>
                        <tr class="mobile_show_row" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">
                          <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">&nbsp;</td>
                        </tr>
                      </tbody>
                    </table></td>
                  <td class="mobile_show_cell" style="display: none; font-size: 0px; max-height: 0px; max-width: 0px; line-height: 0px; padding: 0; mso-hide: all;">&nbsp;</td>
                </tr>
              </tbody>
            </table></td>
        </tr>
        <!--<![endif]-->

        <tr>
          <td width="600" class="responsive" style="background-color:#FFFFFF; border-top: 1px solid #1cadda; border-bottom: 1px solid #1cadda"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td width="4%">&nbsp;</td>
                  <td width="92%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td style="font-family: Arial, Helvetica, sans-serif; font-size: 20px; text-align: center; line-height: 24px; color: #1cadda;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada risus augue, eget scelerisque enim.</strong></td>
                        </tr>
                        <tr>
                          <td>&nbsp;</td>
                        </tr>
                      </tbody>
                    </table></td>
                  <td width="4%">&nbsp;</td>
                </tr>
              </tbody>
            </table></td>
        </tr>
        <tr>
          <td width="600" class="responsive" style="background-color:#000000;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td width="4%">&nbsp;</td>
                  <td width="92%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; line-height: 16px; color: #FFFFFF;">Copyright &copy; 2018 XXXXXX, All rights reserved.</td>
                        </tr>
                        <tr>
                          <td>&nbsp;</td>
                        </tr>
                      </tbody>
                    </table></td>
                  <td width="4%">&nbsp;</td>
                </tr>
              </tbody>
            </table></td>
        </tr>
      </table>

      <!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
  </tr>
</table>
</body>
</html>

Answer 1

我删除了每个mso-hide: all;，您的代码在Outlook中显示的内容与其他所有电子邮件客户端相同。

将它们全部剥离并根据需要逐个更换。

这非常适合隐藏Outlook的部分并隐藏Outlook中的部分：

    <!--[if !mso]><!-- -->
      <img src="http://via.placeholder.com/300x300/0000ff/?text=Modern+Email" alt="Modern+Email" width="100%" style="display:inline-block;border:none;outline:none;padding:0;margin:0;width:100%;height:auto;" border="0" hspace="0" vspace="0">
    <!--<![endif]-->
    <!--[if gte mso 9]>
      <img src="http://via.placeholder.com/300x300/ff0000?text=Outlook" alt="" width="100%" style="display:inline-block;border:none;outline:none;padding:0;margin:0;width:100%;height:auto;" border="0" hspace="0" vspace="0">
    <![endif]-->

您可以随时复制此页面的内容，并在Outlook和现代浏览器中尝试使用上述标记显示内容。

https://jsfiddle.net/wallyglenn/5hruzos5/

祝你好运。

条件注释之间的Outlook 2007空白

1 个答案: