Пуленепробиваемый фон MSO, искажающий макет электронной почты для Outlook - PullRequest
Новая
       36

Пуленепробиваемый фон MSO, искажающий макет электронной почты для Outlook

0 голосов
/ 21 сентября 2018

Я применил пуленепробиваемые фоны для создания фоновых изображений для Outlook.Фоновые изображения загружаются нормально, но их стиль / структура не такие, какими они должны быть в Outlook.

Как это выглядит в Gmail (как я хочу):

enter image description here

Как это показано в Outlook 2007, 2010, 2013 и 2016 (Windows):

enter image description here

Есть идеи, почему это происходит?

Код : 

<!--DOCTYPE html-->
<html>

<head>
  <title></title>
</head>

<body>
  <table leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" border="0" cellpadding="0" cellspacing="0" style="width:600px; margin:0 auto; ">
    <tbody>

      <tr>
        <!-- Condition to allow background images to work in Outlook -->
        <td class="background_image-td" background="https://storage.pardot.com/213851/80721/email_insert_1.png" bgcolor="#1f3c5a" width="600" valign="top">
          <!--[if gte mso 9]>
                  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
                  <v:fill type="tile" src="https://storage.pardot.com/213851/80721/email_insert_1.png" color="#1f3c5a" />
                  <v:textbox inset="0,0,0,0">
                  <![endif]-->
          <div class="background_img-container">
            <table border="0" cellpadding="0" cellspacing="0">
              <tbody>
                <!-- Creating padding above nested div -->
                <tr>
                  <td height="30" style="height:30px;">
                    <!--PADDING-->
                  </td>
                </tr>
                <!-- Nested table for overlapping td -->
                <tr>
                  <td class="table-td" align="center">
                    <table border="0" cellpadding="0" cellspacing="0">
                      <tbody>
                        <tr>
                          <td class="table-td">
                            <table border="0" cellpadding="0" cellspacing="0" bgcolor="#e3e1e5" style="width:50%; opacity: 0.9; padding: 40px 40px; background-color: #e3e1e5;">
                              <tbody>
                                <tr>
                                  <td style="color: #1c9ad6; font-size:1.5rem; font-family:'Klavika', Arial,sans-serif; text-align:left; padding:20px;">How to address your taste formulation challenges.</td>
                                </tr>
                                <tr>
                                  <td style="padding:10px 0px;">
                                    <!--PADDING-->
                                  </td>
                                </tr>
                                <tr>
                                  <td class="table-td" align="center">
                                    <a href="#" alt="Discover more at SSW" target="_blank">
                                      <img src="https://storage.pardot.com/213851/80839/discover_more.png" alt="Discover more at SSW" style="width:246px;">
                                    </a>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
                <!-- Nested table end -->
                <!-- Creating padding below nested table -->
                <tr>
                  <td height="30" style="height:30px;">
                    <!--PADDING-->
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- Nested table end -->
          </div>
          <!--[if gte mso 9]>
                  </v:textbox>
                  </v:rect>
                  <![endif]-->
        </td>
      </tr>
    </tbody>
  </table>

</body>

</html>

Ответы [ 2 ]

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

Попробуйте добавить к вашему mso-fit-to-shape: true к стилю вашего текстового поля.Это делает VML подходящим для вашего контента без необходимости увеличения. 

<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
0 голосов
/ 21 сентября 2018

Добавьте высоту к этой строке VML.Если я вспоминаю, Outlook не будет корректировать форму VML в соответствии с содержимым внутри нее.

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">

Следует помнить одну вещь: левый отступ не будет работать внутри VML в Outlook.2013/2016.Если заполнение необходимо, попробуйте заменить его на фиксированную ширину td и используйте CSS / Media Query, чтобы скрыть это и применить заполнение для мобильных представлений.

...