用于响应式 eBlast 的 Outlook 2007、2010 和 2013 中的最小宽度最大宽度答案

【问题标题】：Min-Width Max-Width in Outlook 2007, 2010, and 2013 for responsive eBlast用于响应式 eBlast 的 Outlook 2007、2010 和 2013 中的最小宽度最大宽度
【发布时间】：2016-08-16 18:21:46
【问题描述】：

我正在为客户(it can be found here)制作eBlast

除了绅士的底部图片外，一切看起来都很好，在 Outlook 中它被炸成巨大的尺寸。

我在某些 Outlook 电子邮件服务中遇到问题。 eBlast 通过了除 Outlook 2010 和 2013 之外的所有 Litmus 测试，当我进一步研究该问题时，我发现这是因为 Max-width 和 min-width 在 Outlook 中无关紧要，因为它不读取该代码。

任何人都可以看看这段代码并提出一些我可以应用于 eblast 底部的图像的修复，它目前位于这个代码块中：

<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>

我将永远感激不尽，谢谢。

【问题讨论】：

标签： html css outlook html-email

【解决方案1】：

如果您要设置最大宽度，为什么不继续设置图像的大小，或者从一开始就将其设置为预先确定的宽度。

这样你的后备是它加载最大的图像，因为 Outlook 将忽略该最大宽度并显示完整图像。

由于您不会超过 600 像素，因此硬编码或仅调整实际的全尺寸图像而不是尝试使用 css 调整大小真的不应该有任何问题。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：