Question

Outlook中的图片太高了。虽然实际图像在未被遮挡时高度为50像素，但在被遮挡时图像高达数百像素。我在Yahoo explorer，Gmail资源管理器和其他资源管理器客户端遇到了同样的问题。我添加了max-height =＆＃34; 200＆＃34;的内联样式。这解决了这些客户端中的问题，但在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 =＆＃34; 200＆＃34;外部tbody，外部tr，外部td，内部工作台，内部t体，内部tr和/或内部td。不确定是哪一个。

线高是原因，和/或解决方案吗？我应该应用line-height =＆＃34; 0＆＃34;，如果是，应该应用哪个元素？

我已经看过mso-line-height-rule：确切地说;用于某些相关问题。这是一个解决方案吗？

您认为上述未列出的解决方案是否可以解决问题？

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;的内部课程。

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

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

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

2 个答案: