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

Question

Outlook 中被阻止的图像太高。实际图像在未被遮挡时为 50 像素高，而在被遮挡时图像为数百像素高。我在 Yahoo 浏览器、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

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

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

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

Answer 2

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

Outlook 也不遵守 max-height（或 max-width）CSS 规则，因此如果您执行了 width="100%" height="auto"（有效），您仍然会看到大占位符图像框，而不管 CSS .

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