在 Outlook 2007、2010 和 2013 中实现响应式电子快讯所需的最小宽度和最大宽度

Question

我正在为客户制作电子快讯（可在此处找到）。

除了下面那张绅士的照片外，一切看起来都很好，在Outlook中，它被放大到了巨大的尺寸。

我在某些Outlook邮件服务中遇到了问题。电子快讯通过了所有Litmus测试，但在Outlook 2010和2013中出现问题，当我进一步研究这个问题时，我发现这是因为Max-width和min-width在Outlook中不起作用，因为它不读取该代码。

请问有人可以查看这段代码并建议一些修复措施，以便在电子快讯底部的图像中应用它，它目前位于以下代码块中：

<table style="border-spacing: 0;border-collapse: collapse;vertical-align: top" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr style="vertical-align: top">
    <td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top;width: 100%;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px" align="center">
        <div style="font-size:12px" align="center">
        <img class="center" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block;border: none;height: auto;line-height: 100%;margin: 0 auto;float: none;max-width: 146px" align="center" border="0" src="http://www.lonebeacondevelopment.com/images/jfir.jpg" alt="Image" title="Image" style="max-width:146px !important; width:50%">
        </div>
    </td>
</tr>

我将永远感激你，谢谢。

- kgmack

Answer 1

如果你无论如何都要设置max-width，为什么不直接将图像大小设置为max-width或从一开始就将其设置为预定宽度。这样的话，即使Outlook无论如何都会忽略max-width并显示完整的图片，你的回退方式也是加载最大尺寸的图片。 由于你不会超过600px，所以使用硬编码或调整实际全尺寸图像而不是尝试使用css调整大小应该不会有任何问题。

- Adam

Answer 2

您的问题之一是在同一元素中有两个样式属性。其中一个将被忽略。对于Outlook而言，我发现最好的解决方案是在设置最大宽度的样式之前添加一个旧式的explicit width="146"。Outlook只会注意到旧属性，而更现代的客户端将解释样式中的max-width。

- Michael Holland

Answer 3

你是正确的，Outlook 不支持 min-width 或 max-width。 由于 Outlook 2010 和 2013 仅适用于桌面设备，并使用 Microsoft Office 来呈现电子邮件，因此我们可以使用 ghost tables 和 VML 来使图像在这些电子邮件客户端中仅以 146 像素宽度显示。 类似以下代码应该能达到效果：

<div style="max-width: 146px;">
    <!--[if mso]>
    /* Everything inside here is only read by Outlook 07/10/13 */
    <table cellspacing="0" cellpadding="0" border="0" width="146" align="center">
    <tr>
    <td>
    <![endif]-->
        <img class="center" src="http://www.lonebeacondevelopment.com/images/jfir.jpg" alt="Image" title="Image" style="width: 100%;">
    <!--[if mso]>
    </td>
    </tr>
    </table>
    <![endif]-->
</div>

- Ted Goas