Outlook中的mso-line-height剪切图像答案

【问题标题】：mso-line-height clipping images in outlookOutlook中的mso-line-height剪切图像
【发布时间】：2018-12-06 17:15:41
【问题描述】：

我正在为一个客户端构建一个 html 模板，它将在 mailchimp 中创建一个拖放构建器。

我已全局使用mso-line-height:exactly 属性来控制 Outlook 应用的不稳定行高。

但是 - 正因为如此，当客户端使用“插入图像”文本编辑器将图像插入正文文本时，图像将被剪切到文本的行高 - 例如，如果行高为 20 像素，则图片仅显示底部 20px。

我通过研究提供的解决方案是，我必须全局删除 mso-line-height 属性，并仅在我真正需要时将其应用到 html 代码中——尽管这不是客户可以维护的。

如何仅删除图像上的此属性？我希望确切的规则到位，直到插入图像时将其删除。

我试过了

img {
    border:0 !important;
    outline:none !important;
    display:block !important;
    mso-line-height-rule:at-least !important;
    mso-height-source:userset !important;
}

还在 mailchimp 界面内的代码编辑器中手动设置“最小高度：插入图像高度！重要”，但没有任何效果。

目前您似乎只有 2 个选项

1 - 您有正确的行高，但客户端永远不能在文本中插入图像（必须是预先设计好的表格单元格以在其中包含图像）

或

2 - 您有不正确的行高和未剪裁的图像，但可以在需要时插入它们。

是否有解决方案，不涉及每次编辑html但可以在css中处理？

这是我最初的样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <!--[if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->


<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta content="telephone=no" name="format-detection">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>template</title>



<style type="text/css">
        body{
            margin:0 !important;
            padding:0 !important;
            -webkit-text-size-adjust:100% !important;
            -ms-text-size-adjust:100% !important;
            -webkit-font-smoothing:antialiased !important;
        }
    /*
    @tab Button
    @section background-Colour
    */
        .button{
            /*@editable*/background-color:#e5e5e5 !important;
            /*@editable*/color:#000000 !important;
            height:43px !important;
            margin-right:0 !important;
            font-size:15px !important;
            padding:0 5px !important;
        }
    /*
    @tab Button_2
    @section background-Colour
    */
        .button_2{
            /*@editable*/background-color:#e5e5e5 !important;
            /*@editable*/color:#000000 !important;
            margin-right:0 !important;
            font-size:15px !important;
            padding:0 5px!important;
        }
        a{
            text-decoration:none !important;
            color:black !important;
        }
        span.red-2{
            color:#bc3434 !important;
        }

        span.white-force {
            color:#ffffff !important;
            text-decoration: none;
        }

        .white-force a {
            color:#ffffff !important;
            text-decoration: none;
        }


        img{
            border:0 !important;
            outline:none !important;
            display:block !important;
        }
        table{
            border-collapse:collapse;
            mso-table-lspace:0;
            mso-table-rspace:0;
        }
        td{
            border-collapse:collapse;
            mso-line-height-rule:exactly;
        }
        a,span{
            mso-line-height-rule:exactly;
        }
        .ExternalClass *{
            line-height:100%;
        }
        .white a{
            color:#ffffff;
            text-decoration:none;
        }
        .white1 a{
            color:#333333;
            text-decoration:none;
            background-color:#333333;
        }
        .white2 a{
            text-decoration:none;
        }
        .black a{
            text-decoration:none;
        }
        .black3 a{
            text-decoration:none;
        }
        .black2 a{
            text-decoration:none;
        }
        .red a{
            text-decoration:none;
        }
        .grey a{
            text-decoration:none;
        }
        .grey1 a{
            text-decoration:none;
        }
        .applewhiltelink a{
            color:inherit !important;
            text-decoration:none !important;
        }
        .video img{
            width:100%;
            height:auto;
        }



        .mcnTextContent img{
            height:auto !important;
        }



    @media only screen and (min-width:481px) and (max-width:599px){
        table[class=wrapper]{
            width:100% !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        table[class=main_table]{
            width:100% !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        td[class=pad_side]{
            padding-left:14px !important;
            padding-right:14px !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        td[class=hide],br[class=hide]{
            display:none !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        img[class=full_img]{
            width:100% !important;
            height:auto !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        td[class=text],td[class=black],td[class=black2],td[class=red],td[class=white],td[class=white1],td[class=white2],td[class=grey], td[class=white-force]{
            text-align:center !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        td[class=pad_bottom]{
            padding-bottom:30px !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        td[class=pad_top],
        td[class=pad_top_split]{
            padding-top:30px !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        td[class=fix_height]{
            height:30px !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        td[class=video] img{
            width:100% !important;
            height:auto !important;
        }

}   @media only screen and (max-width:480px){
        table[class=wrapper]{
            width:100% !important;
        }

}   @media only screen and (max-width:480px){
        table[class=main_table]{
            width:100% !important;
        }

}   @media only screen and (max-width:480px){
        td[class=pad_side]{
            padding-left:14px !important;
            padding-right:14px !important;
        }

}   @media only screen and (max-width:480px){
        td[class=hide],br[class=hide]{
            display:none !important;
        }

}   @media only screen and (max-width:480px){
        img[class=full_img]{
            width:100% !important;
            height:auto !important;
            max-width: none !important;
        }

}   @media only screen and (max-width:480px){
        td[class=text],td[class=black],td[class=black2],td[class=red],td[class=white],td[class=white1],td[class=white2],td[class=grey],td[class=white-force]{
            text-align:center !important;
        }

}   @media only screen and (max-width:480px){
        td[class=pad_bottom]{
            padding-bottom:30px !important;
        }

}   @media only screen and (max-width:480px){
        td[class=pad_top],
        td[class=pad_top_split]{
            padding-top:30px !important;
        }

}   @media only screen and (max-width:480px){
        td[class=fix_height]{
            height:30px !important;
        }

}   @media only screen and (max-width:480px){
        td[class=video] img{
            width:100% !important;
            height:auto !important;
        }
}

@media only screen and (max-width:480px){
        td[class=pad_top_split]{
            padding-top:0 !important;
        }
}</style></head>

*编辑

每个包含文本的块（但可能不一定以图像结尾，具有 .grey 类 - 我尝试了这些选项但无济于事

.grey img {
line-height: 100px (random but taller then the test image)!important;
}

还有

.grey img {
line-height:unset !important;
}

我只想在文本中插入任何图像来忽略周围的行高。

这是一个示例块

<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper" mc:repeatable mc:variant="text block" style="table-layout:fixed;margin-left:auto;margin-right:auto;">
      <tr>
        <td valign="top" bgcolor="#000000">
          <table width="650" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
            <tr>
              <td width="50" align="center" class="hide"> </td>
              <td valign="top" class="pad_side">
                <table width="550" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
                  <tr>
                    <td valign="top" height="40" class="fix_height"> </td>
                  </tr>
                  <tr>
                    <td align="center" valign="top" style="font-family:Arial, sans-serif;font-size:15px;line-height:25px;color:#000000;background-color:#000000;" mc:edit="lorem_ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae interdum ligula. Pellentesque feugiat ligula ligula, in interdum dolor aliquet et.</td>
                  </tr>
                  <tr>
                    <td valign="top" height="40" class="fix_height"> </td>
                  </tr>
                </table>
              </td>
              <td width="50" align="center" class="hide"> </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

【问题讨论】：

如何将它添加到一个始终包含文本的元素上的类中？
您在img 元素上设置了哪些内联样式，并且它是父td？您能否将文本和图像分成不同的td 元素，以便可以从img 父元素中删除任何line-height？
我无法在图像上设置任何内联样式，因为客户端（没有编码技能）将根据需要添加图像，就像使用内置默认 MailChimp 模板的任何人一样可以在文本中添加图像。 MailChimp 编辑器没有出现这个问题，但似乎出现在我的问题上，我不知道为什么。每个包含文本的框都有一个“灰色”类，所以我尝试了：.grey img { line-height:100px !important; } 但这不起作用（100px 是一个随机高度，但比我测试它的图像高）。
我在原始问题中添加了更多信息
我正在尽最大努力复制您的问题，但它似乎按预期运行。您能take a look 看看它是否与您的编程方式相去甚远？

标签： html-email mailchimp

【解决方案1】：

在您的图片上尝试mso-line-height-rule: at-least。它本质上与mso-line-height-rule: exactly相反。

This blog post 可能会提供更多见解。

在我自己的构建中，我将此 Outlook 条件样式块添加到其他嵌入样式的下方。然后在我的内联样式中，我避免使用 mso-line-height 规则，只将 font-size/line-height 设置为正常

  <!--[if mso]>
    <style>
      td,th,p,a,h1,h2,h3,h4,h5,h6 {
        mso-line-height-rule: exactly;
      }
    <style>
  <![endif]-->

【讨论】：