Outlook中的MSO线高度剪切图像

时间：2018-12-06 17:15:41

标签： html-email mailchimp

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

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

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

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

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

我尝试过

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-您具有正确的行高，但是客户端永远不能在文本之间插入图像（必须预先设计表格单元才能在其中包含图像）

OR

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>

1 个答案:

答案 0 :(得分：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]-->
相关问题
最新问题