Отсечение изображений по mso-line-height в outlook - PullRequest
Новая
       25

Отсечение изображений по mso-line-height в outlook

0 голосов
/ 06 декабря 2018

Я создаю HTML-шаблон для клиента, который создаст конструктор перетаскивания в mailchimp.

Я использовал атрибут mso-line-height:exactly в глобальном масштабе для управления ошибочной высотой строки, применяемой Outlook.

Однако - из-за этого, когда клиент вставляет изображение в основной текст, используя 'insertтекстовый редактор изображения, изображения обрезаются по высоте строки текста - например, если высота строки составляет 20 пикселей, изображение показывает только нижние 20 пикселей.

Решение, которое я получил в результате исследований, заключается в том, чтоЯ должен удалить атрибут 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;
}

И также установил 'min-высота: вставьте высоту изображения «важно» вручную в редакторе кода внутри интерфейса 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>

* edit

Каждый блок, содержащий текст (но не обязательно заканчивающийся изображением в нем, имеет класс).серый - я попробовал этот вариантs, но безрезультатно 

.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 голосов
/ 10 декабря 2018

Попробуйте mso-line-height-rule: at-least на ваших изображениях.По сути, это противоположно mso-line-height-rule: exactly.

Этот пост в блоге может предложить более глубокое понимание.

В моих собственных сборках я добавляю этот блок условных стилей 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]-->
...