格式化电子邮件布局问题 Outlook 2013 - Windows 7答案

【问题标题】：Formatting email layout issue Outlook 2013 - Windows 7格式化电子邮件布局问题 Outlook 2013 - Windows 7
【发布时间】：2016-02-08 08:24:34
【问题描述】：

我修改了一个电子邮件模板（来自 Campaign Monitor），它具有响应性并且适用于大多数电子邮件浏览器。

但是，电子邮件标头在 Outlook 2013、Windows 7 上遇到格式问题。

我弄乱了内联格式并使用 CSS 试图找到解决方案。

正确的电子邮件

Outlook 2013，Windows 7

我创建了一个 JSFiddle 来查看 HTML 代码：https://jsfiddle.net/jeremyccrane/wz4Ly555/

    <!--[if mso]>
<body class="mso">
  <![endif]-->
  <!--[if !mso]><!-->
  <body class="half-padding" style="margin: 0;padding: 0;min-width: 100%;background-color: #E7E7E7;">
    <!--<![endif]-->
    <center class="wrapper" style="display: table;table-layout: fixed;width: 100%;min-width: 620px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;background-color: #E7E7E7;">
      <table class="header centered" style="border-collapse: collapse;border-spacing: 0;Margin-left: auto;Margin-right: auto; width: 600px;">
        <tbody>
          <tr>
            <td style="padding: 0;vertical-align: top;">
              <table class="one-col" style="border-collapse: collapse;border-spacing: 0;Margin-left: auto;Margin-right: auto;width: 600px;background-color: #ffffff;table-layout: fixed;" emb-background-style>
                <tbody>
                  <tr>
                    <td class="column" style="padding: 0;vertical-align: top;">
                      <table class="contents" style="border-collapse: collapse;border-spacing: 0;table-layout: fixed;width: 100%; background:#EE3524;">
                        <tbody>
                          <tr>
                            <td class="remove-padding" style="padding: 0;vertical-align: top;padding-left: 0px;padding-right: 0px;word-break: break-word;word-wrap: break-word;">
                              <div class="image" style="font-style: normal;font-weight: 400;Margin-bottom: 0;Margin-top: 0;font-family: sans-serif;color: #000;" align="center">
                                <img style="border: 0;-ms-interpolation-mode: bicubic;display: block;" src="https://www.dropbox.com/s/bif26pxsl39mv5u/HEADER.png?raw=1" class="" width="600px"/>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </center>
</body>
</html>

【问题讨论】：

标签： html css email outlook

【解决方案1】：

我在 Litmus 中测试了来自 jsfiddle 的 html，似乎还可以。

你能详细解释一下如何获得两个红色区域的

【讨论】：

谢谢@joris-ros。在 Litmus 中，它似乎可以正确呈现，但是当客户端收件箱收到电子邮件时，它不会正确呈现。
具体配置你了解更多吗？ Litmus 在 Windows 7 上制作屏幕截图，我唯一想到的是渲染引擎依赖于旧的 IE 版本或类似的东西。
我相信用于 Exchange 2007/2010/2013 的呈现引擎是 Exchange 中内置的 microsoft word HTML 查看器。不确定 Litmus 是如何使用他们的软件呈现的。