css - Aweber 电子邮件模板，在 outlook 中宽度乱七八糟

Question

我们也在努力使这项工作在 Outlook 中有效，但我在网上找到的解决方案无效。 outlook 中的电子邮件宽度约为 1500px。有谁知道解决方案？代码在 Aweber 中生成。我们尝试了很多东西，但似乎没有什么会影响外观。 :(

  <!-- LOGO -->
  <div style="max-width:680px;margin:auto;" class="email-container">
    <!--[if mso]>
    <table style=”word-break: break-all;” cellspacing="0" cellpadding="0" border="0" width="680" align="center">
      <tr>
        <td>
          <![endif]-->
    <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width:680px;">
      <tbody><tr>
        <td style="padding:30px 0;text-align:center;" class=""><aw:header></td>
      </tr>
    </tbody></table>
    <!-- BODY -->
    <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width:680px;border-radius:3px;overflow:hidden">
      <tbody>
      <!-- 1 Column Text + Button -->
      <tr>
        <td bgcolor="#ffffff">
          <table cellspacing="0" cellpadding="0" border="0" width="100%">
            <tbody><tr>
              <td mc:edit="lead_copy" style="padding:40px;font-family:sans-serif;font-size:14px;line-height:22px;color:#555555;" class=""><aw:body></td>
            </tr>
          </tbody></table>
        </td>
      </tr>


      <!-- Clear Spacer -->
      <tr>
        <td height="40" style="font-size:0;line-height:0;" class="">
           
        </td>
      </tr>


      <!-- 3 Cols -->




      <!-- Clear Spacer -->


      <!-- Minuscule -->

    </tbody></table>

    <!-- Email Footer -->
    <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width:680px;">
      <tbody><tr>
        <td style="padding:40px 10px;width:100%;font-size:12px;font-family:sans-serif;line-height:18px;text-align:center;color:#888888;" class="x-gmail-data-detectors"><aw:footer></td></tr>
      </tbody></table>
      <!--[if mso]>
    </td>
  </tr>
</table>
<![endif]-->
    </div>
  </center>

Answer 1

Outlook 根本不读取最大宽度值。如果将 max-width 与 width:100% 结合使用，那将会有所帮助。或者，您可以使用一些条件语句来帮助您处理不同客户端的宽度。我为您询问了 AWeber 模板团队的成员，他们建议这两个:

    <!--[if !mso]><!--><table cellpadding="0" cellspacing="0" style="max-width:600px!important; width:100%;"><![endif]-->

    <!--[if gte mso 9]><table cellpadding="0" cellspacing="0" width="600"><![endif]-->

有条件将使宽度在移动设备上为 100%，我想你也想要，但在其他地方为 600。