html - Outlook 中被阻止的图像比未被阻止时高得多

Question

Outlook 中被阻止的图像太高。实际图像在未被遮挡时为 50 像素高，而被遮挡时图像为数百像素高。我在雅虎浏览器、Gmail 浏览器和其他浏览器客户端中遇到了同样的问题。我添加了 max-height="200"的内联样式。这解决了这些客户端中的问题，但没有解决 Outlook 客户端中的问题。

Litmus 显示此问题影响 Outlook 2007 和 Outlook 2003，图像被阻止。不确定其他版本的 Outlook。我正在使用 mailchimp 模板来构建这些电子邮件，但尚未进行结构修改。这是问题的屏幕截图。

https://www.dropbox.com/s/udd9nb9vapt5tn7/Screenshot%202015-03-09%2014.25.38.png?dl=0

这是包含图像的 HTML tbody

<tbody class="mcnImageBlockOuter">
            <tr>
                <td valign="top" style="padding:9px" class="mcnImageBlockInner">
                    <table align="left" width="100%" max-height="200" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer">
                        <tbody><tr>
                            <td class="mcnImageContent" valign="top" style="padding-right: 9px; padding-left: 9px; padding-top: 0; padding-bottom: 0;">

                                    <a href="http://www.simplystamps.com/" title="" class="" target="_blank">
                                        <img align="left" alt="Simply Stamps Logo" src="http://simplystamps.com/enews/SimplyStampsLogo.jpg" width="520" style="max-width:520px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage">
                                    </a>

                            </td>
                        </tr>
                    </tbody></table>
                </td>
            </tr>
    </tbody>

除了媒体查询之外，mcnImageBlockOuter、mcnImageBlockInner、mcnImageContentContainer、mcnImageContent 没有样式表 CSS，但是 .mcnImage 有一条规则

    .mcnImage{
        vertical-align:bottom;
    }

我对 web HTML 很熟悉，但对电子邮件 HTML 不熟悉。对于如何解决这个问题，我有几个想法，但因为我必须对每个想法进行耗时的收件箱检查，所以我想在这里提出它们，这样我就可以缩小可能的解决方案，希望缩小到一个。

将 max-height="200"应用于外部 tbody、外部 tr、外部 td、内部表、内部 tbody、内部 tr 和/或内部 td。不确定是哪个。

行高是原因，和/或这里的解决方案吗？我应该应用 line-height="0"吗？如果是，应用到哪个元素？

我看过 mso-line-height-rule:exactly;用于一些相关的问题。这是解决方案吗？

上面是否列出了您认为可以解决问题的任何解决方案？

Answer 1

max-height 和 line-height 都不是有效的 HTML 属性。被阻止的图像太高的原因是因为您根本没有设置图像的高度，并且 Outlook 和所有其他客户端都假定图像是正方形。

Outlook 也不遵守 max-height(或 max-width)CSS 规则，所以如果您这样做了 width="100%" height="auto"(这是有效的)无论 CSS 是什么，您仍然会看到大的占位符图像框。

我对 Outlook(或一般的电子邮件客户端)编码的最大建议 - 使用尽可能少的 CSS 规则，依赖有效的 HTML 4.xx 属性，并尽可能明确到像素。