html - iOS 9 电子邮件 - 文本重叠图像横幅

Question

背景:我构建并发送电子邮件营销，自从 iOS9 发布以来，我们所有使用此 iOS 版本的客户在邮件应用程序中打开我们的电子邮件时都遇到了这个问题:

您在屏幕截图中看到的是与横幅重叠的文本，也与公司 Logo 重叠。似乎先加载文本，然后加载横幅，并且在加载横幅时文本没有被下推。

header 模块(带有 Logo )、横幅和文本模块的代码如下

<table id="header-table" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
  <tr>
    <td>
      <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0 auto;">
        <tr>
          <td width="100%" style="padding:10px 15px;">
            <table class="deviceWidth" cellpadding="0" cellspacing="0" border="0" width="300" align="left">
              <tr>
                <td class="logo" width="300" valign="top" align="center" style="mso-table-lspace:0;mso-table-rspace:0;">
                    <a rilt="Logo" target="_blank" href="http://www.aaa.com"><img width="300" height="125" border="0" style="display:block;" src="Logo.jpg" alt="aaa" class="deviceWidth" /></a>
                </td>
              </tr>
            </table>
            <table class="deviceWidth" cellpadding="0" cellspacing="0" border="0" width="300" align="right">
              <tr class="hide">
                <td align="right" style="padding:25px 0px 10px 0px;mso-table-lspace:0;mso-table-rspace:0;">
                  <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td valign="middle" align="right">
                        <a class="telephone" href="tel:1800-555-555" style="color:#58585a; font-size:16px; text-decoration:none;"><img width="25" border="0" style="display:block;" src="/contentlibrary/cell/base/images/phone.png" alt=""/></a>
                      </td>
                      <td valign="middle" align="right" style="padding:0px 0px 0px 5px;font-family:arial;font-size:14px;line-height:14px;color:#B5ADA6;">
                        <a class="telephone" href="tel:1800-500-260" style="color:#B5ADA6; font-size:14px; text-decoration:none;">1800 555 555</a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td class="deviceWidth nav" valign="top" align="right" style="padding:0px 0px 0px 0px;font-family:arial;font-size:11px;line-height:13px;color:#7E7774;">
                  <a rilt="TNavReds" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/red-wine?product-type=straight-cases">Chairs</a> | <a rilt="TNavWhites" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/white-wine?product-type=straight-cases">Sofas</a> | <a rilt="TNavMixes" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/mixed-cases">Shirts</a> | <a rilt="TNavSparkling" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/sparkling?product-type=straight-cases">Pants</a> <span class="hide" >| <a rilt="TNavClearance" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/wine-clearance">Shoes</a></span>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table id="banner-module" width="100%" min-width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="background-color:#E5E0D9;">
  <tr>
    <td>
      <table width="640" align="center" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
        <tr>
          <td width="100%" align="center">
            <a rilt="TopBanner" href="http://www.aaa.com?utm_link=TopBanner" target="_blank"><img width="640" height="400" border="0" style="display:block;" src="Banner.jpg" alt="Banner" class="deviceWidth"/></a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table id="1col-module-1" width="100%" min-width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td>
      <table width="640" cellpadding="0" cellspacing="0" border="0" align="center" style="margin: 0 auto;">
        <tr>
          <td class="copy" width="100%" valign="top" align="left" style="font-family:arial;font-size:13px;line-height:16px;color:#000001;padding:30px 10px 10px 10px;">
            Hi $First_Name$,
            <br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis luctus elit ornare tempus. Phasellus eget luctus nisi. Mauris vel orci adipiscing, placerat velit nec, laoreet purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam et mi erat.
            <br />
            <br />
            Quisque malesuada massa in mi tristique, tincidunt consequat ligula tempor. Maecenas sollicitudin sem quis ipsum tristique adipiscing. Aenean tincidunt tortor lectus, vel ultricies lectus condimentum ut.
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

如果您将屏幕旋转为横向并将其翻转回纵向，它会强制电子邮件正确呈现 - 但这不是理想的长期解决方案