mso-line-height 在 outlook 中剪切图像

Question

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

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

但是 - 因此，当客户端使用 'insert image' 文本编辑器将图像插入正文时，图像会在文本的行高处被剪裁 - 例如，如果行高是20px，图片只显示底部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 界面内的代码编辑器中手动设置 'min-height:insert image height !important'，但没有任何效果。

目前您似乎只有 2 个选择

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

或

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>

*编辑

每个包含文本的块（但不一定以图像结尾，具有 class .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>

Answer 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]-->

mso-line-height 在 outlook 中剪切图像

mso-line-height clipping images in outlook

html-email

mailchimp