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

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

将 max-height="200" 应用于外部 tbody、外部 tr、外部 td、内部 table、内部 tbody、内部 tr、and/or 内部 td。不确定是哪一个。

行高是问题所在，and/or这里有解决办法吗？我应该应用 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 属性，并且尽可能尽可能明确到像素。

Answer 2

您可以尝试添加 height:50px !important; !important 是必需的，因为您可能需要覆盖带有 height:auto !important; 的内部 class。

您也可以尝试使用高度属性，而不是 css。

我遇到过一些电子邮件客户端的问题，在一种情况下，只需添加 height:XXpx; 即可解决，而在另一种情况下，我注意到它被另一个 height: auto;[= 覆盖了15=]

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

Blocked images in Outlook are much taller than when they are not blocked

html

css

email

outlook

html-email