Как предотвратить встроенный блок из моей электронной почты в стек на iPad?

Первоначально я создал электронное письмо с использованием MJML и адаптировал код для улучшения мобильной версии.

1) У меня нет проблем с проверкой электронной почты с помощью Chrome и ее тестированием со всеми настольными клиентами с помощью лакмуса, но версия встроенных блоков стека электронной почты для iPad.

2) Некоторые элементы, отображаемые только на мобильных устройствах с использованием медиа-запросов, не видны при тестировании электронной почты, тогда как я вижу их в хроме.

Вот предварительный просмотр проблем: введите описание изображения здесь

Вот ссылка на HTML-файл: Html-файл

Вот начало кода:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
  <title>Invitiation à l'avant-première "Quoi de neuf au moyen âge ?"</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <!--[if !mso]><!-->
  <style type="text/css">
    @media (max-width:660px) {
      @-ms-viewport { width: 320px; }
      @viewport { width: 320px; }
    }  
  </style>
  <!--<![endif]-->

  <style type="text/css">
    #outlook a { padding: 0; }
    .ReadMsgBody { width: 100%; }
    .ExternalClass { width: 100%; }
    .ExternalClass * { line-height: 100%; }
    body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
    p { display: block; margin: 13px 0; }
    .hidden-desktop {display: none!important; max-height: 0; font-size: 0; overflow: hidden; line-height: 0; mso-hide: all;}
  
    @media (min-width:660px) {
      .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width: 100%!important; }
      .mj-column-px-200, * [aria-labelledby="mj-column-px-200"] { width: 200px!important; }
      .mj-column-px-30, * [aria-labelledby="mj-column-px-30"] { width: 30px!important; }
      .mj-column-px-430, * [aria-labelledby="mj-column-px-430"] { width: 430px!important; }
      .mj-column-px-410, * [aria-labelledby="mj-column-px-410"] { width: 410px!important; }
      .mj-column-px-20, * [aria-labelledby="mj-column-px-20"] { width: 20px!important; }
    }       
    @media (max-width:659px) {
      .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width: 280px!important; display: block!important; margin: 0 auto; }
      .mj-column-px-200, * [aria-labelledby="mj-column-px-200"] { width: 280px!important; display: block!important; margin: 0 auto; }
      .mj-column-px-30, * [aria-labelledby="mj-column-px-30"] { width: 0px!important; }
      .mj-column-px-430, * [aria-labelledby="mj-column-px-430"] { width: 280px!important; display: block!important; margin: 0 auto; }
      .mj-column-px-410, * [aria-labelledby="mj-column-px-410"] { width: 280px!important; display: block!important; margin: 0 auto; }
      .mj-column-px-20, * [aria-labelledby="mj-column-px-20"] { width: 0px!important; }   
      .invitation-desktop { display: none!important; }  
      .image-expo { height: 400px!important; background-repeat: no-repeat!important; }
      .hidden-desktop{ display: block!important; max-height: none!important; font-size: 12px; line-height: 1.5!important; overflow: visible!important; }
      .mobile-space{ height: 20px; }
      .mobile-auto-height{ height: auto!important; }
      .hidden-mobile{ display: none!important }
      .logo-table { width: 80px!important; float: left; }
      .logo-padding { padding: 7px!important; }
      .logo { width:66px!important;height:66px!important; }
      .invitation-mobile-title{ width: 200px; float: left; height: 80px;}
      .social-mobile{ width: 80px!important; height: 80px; display: inline-block!important; }
      .social-space-mobile { width: 20px!important; }      
    }     
  </style>  


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

  <!--[if !mso]><!-->  
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,500,700" rel="stylesheet" type="text/css">
  <!--<![endif]-->
 

</head>

<body style="background: #e8e8e8;">
  <div style="background-color:#e8e8e8;">

  <!--[if mso | IE]>
  <table border="0" cellpadding="0" cellspacing="0" width="660" align="center" style="width:660px;">
    <tr>
      <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]-->

        <div style="margin:0 auto;max-width:660px;">
          <table cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
            <tbody>
              <tr>
                <td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;">

                <!--[if mso | IE]>
                <table border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td style="vertical-align:top;width:660px;">
                    <![endif]-->

                      <div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;">
                        <table cellpadding="0" cellspacing="0" width="100%" border="0">
                          <tbody>
                            <tr>
                              <td style="word-break:break-word;font-size:0px;padding:15px;" align="center">
                                <div style="cursor:auto;color:#a6a6a6;font-family:'Lato', Arial, sans-serif;font-size:11px;font-weight:300;line-height:13px;text-transform:none;">
                                  Vous avez des problèmes d’affichage ?
                                  <a href="#" style="font-weight: 300; font-size: 11px; text-transform: none; font-family:'Lato', Arial, sans-serif; color:#a6a6a6">
                                    Visualiser cet email en ligne
                                  </a>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>

                      <!--[if mso | IE]>
                    </td>
                  </tr>
                </table>
                <![endif]-->

                </td>
              </tr>
            </tbody>
          </table>
        </div>

      <!--[if mso | IE]>
      </td>
    </tr>
  </table>
  <![endif]-->

  <!--[if mso | IE]>
  <table border="0" cellpadding="0" cellspacing="0" width="660" align="center" style="width:660px;">
    <tr>
      <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]-->

        <div style="margin:0 auto;max-width:660px;">
          <table cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
            <tbody>
              <tr>
                <td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;">

                  <!--[if mso | IE]>
                  <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td style="vertical-align:top;width:200px;">
                      <![endif]-->

                        <div aria-labelledby="mj-column-px-200" class="mj-column-px-200" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:200px;">
                          <table class="logo-table" cellpadding="0" cellspacing="0" style="vertical-align:top;background:#fff;" width="100%" border="0">
                            <tbody>
                              <tr>
                                <td class="logo-padding" style="word-break:break-word;font-size:0px;padding:25px;" align="center">
                                  <table cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0">
                                    <tbody>
                                      <tr>
                                        <td style="width:150px;">
                                          <img class="logo" alt="" title="" height="150px" src="http://bank.digital-expression.fr/universcience/logo-cite.png" style="border:none;display:block;outline:none;text-decoration:none;width:100%;height:150px;" width="150">
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>

                          <!--[if !mso]><!-->
                          <table class="hidden-desktop invitation-mobile-title" cellpadding="0" cellspacing="0" width="200px" border="0" style="border-collapse:collapse;border-spacing:0px;">
                            <tbody>
                              <tr>
                                <td width="20px">
                                </td>
                                <td width="180px">
                                  <table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
                                    <tbody>
                                      <tr>
                                        <td style="word-break:break-word;font-size:0px;padding:11px 0px;background-color:#d81921;" align="center">
                                          <div style="cursor:auto;color:#ffffff;font-family:'Lato', Arial, sans-serif;font-size:28px;font-weight:400;line-height:28px;text-transform:uppercase;">Invitation</div>
                                        </td>
                                      </tr>
                                      <tr>
                                       <td style="word-break:break-word;font-size:0px;padding:0px 0px;background-color:#000" align="center">
                                          <div style="cursor:auto;color:#ffffff;font-family:'Lato', Arial, sans-serif;font-size:15px;font-weight:400;line-height:30px;text-transform:uppercase;">
                                            <span style="letter-spacing: 3px">
                                              avant-première
                                            </span>
                                          </div>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                          <div style="clear:both;"></div>
                          <!--<![endif]-->                          
                        </div>
                         



                      <!--[if mso | IE]>
                      </td>
                      <td style="vertical-align:top;width:30px;">
                      <![endif]-->

                        <!--[if !mso]><!-->
                        <div class="mobile-space hidden-desktop" style="font-size:1px;line-height:30px;">&nbsp;</div>
                        <!--<![endif]--> 

                        <div aria-labelledby="mj-column-px-30" class="mj-column-px-30" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:30px;">
                          <table cellpadding="0" cellspacing="0" width="100%" border="0">
                            <tbody>
                            </tbody>
                          </table>
                        </div>

                      <!--[if mso | IE]>
                      </td>
                      <td style="vertical-align:top;width:430px;">
                      <![endif]-->

                        <div aria-labelledby="mj-column-px-430" class="mj-column-px-430" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:430px;">
                          <table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
                            <tbody>
                              <tr>
                                <td style="word-break:break-word;font-size:0px;padding:0px;" align="left">
                                  <div class="image-expo" style="margin:0 auto;height:200px;max-width:430px;background:#f2b3b7 url(http://bank.digital-expression.fr/universcience/bg-expo.jpg) bottom right / 430px 200px no-repeat;">

                                    <!--[if mso | IE]>
                                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:430px;">
                                    <v:fill origin="0.5, 0" position="0.5,0" type="tile" src="http://bank.digital-expression.fr/universcience/bg-expo.jpg" />
                                    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                                    <![endif]-->

                                    <table class="image-expo" cellpadding="0" cellspacing="0" height="200px" style="font-size:0px;width:100%;height:200px;background:#f2b3b7 url(http://bank.digital-expression.fr/universcience/bg-expo.jpg) bottom right / 430px 200px no-repeat;" align="center" border="0" background="http://bank.digital-expression.fr/universcience/bg-expo.jpg">
                                      <tbody>
                                        <tr>
                                          <td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;">

                                          <!--[if mso | IE]>
                                            <table border="0" cellpadding="0" cellspacing="0">
                                              <tr>
                                                <td style="vertical-align:top;width:410px;">
                                                <![endif]-->

                                                  <div aria-labelledby="mj-column-px-410" class="mj-column-px-410" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;">
                                                    <table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
                                                      <tbody>
                                                        <tr>
                                                          <td style="word-break:break-word;font-size:0px;padding:0px;">
                                                            <div style="font-size:1px;line-height:20px;">&nbsp;</div>
                                                          </td>
                                                        </tr>
                                                        <tr>
                                                          <td style="word-break:break-word;font-size:0px;padding:0px 0px 0px 20px;" align="left">
                                                            <div style="cursor:auto;color:#ffffff;font-family:'Lato', sans-serif;font-size:30px;font-weight:700;line-height:30px;text-transform:uppercase;">
                                                              Quoi de neuf<br> au moyen âge ?
                                                            </div>
                                                          </td>
                                                        </tr>
                                                        <tr>
                                                          <td style="word-break:break-word;font-size:0px;padding:0px;">
                                                            <div style="font-size:1px;line-height:20px;">&nbsp;</div>
                                                          </td>
                                                        </tr>
                                                        <tr>
                                                          <td style="word-break:break-word;font-size:0px;padding:0px 0px 0px 20px;" align="left">
                                                            <div style="cursor:auto;color:#ffffff;font-family:'Lato', sans-serif;font-size:14px;font-weight:400;line-height:16px;text-transform:uppercase;">
                                                              TOUT CE QUE L’ARCHEOLOGIE<br> NOUS RÉVÈLE
                                                            </div>
                                                          </td>
                                                        </tr>
                                                        <tr>
                                                          <td style="word-break:break-word;font-size:0px;padding:0px;">
                                                            <div style="font-size:1px;line-height:10px;">&nbsp;</div>
                                                          </td>
                                                        </tr>
                                                        <tr>
                                                          <td style="word-break:break-word;font-size:0px;padding:0px 0px 0px 20px;" align="left">
                                                            <div style="cursor:auto;color:#ffffff;font-family:'Lato', sans-serif;font-size:40px;font-weight:700;line-height:40px;text-transform:uppercase;">
                                                              <a href="#" style="color: #ffffff; text-decoration: none; padding: 0px">+</a>
                                                            </div>
                                                          </td>
                                                        </tr>
                                                      </tbody>
                                                    </table>
                                                  </div>

                                                <!--[if mso | IE]>
                                                </td>
                                                <td style="vertical-align:top;width:20px;">
                                                <![endif]-->

                                                  <div aria-labelledby="mj-column-px-20" class="mj-column-px-20" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;">
                                                    <table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
                                                      <tbody>
                                                      </tbody>
                                                    </table>
                                                  </div>

                                                <!--[if mso | IE]>
                                                </td>
                                              </tr>
                                            </table>
                                            <![endif]-->

                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  
                                    <!--[if mso | IE]>
                                    </v:textbox>
                                    </v:rect>
                                    <![endif]-->
                                  
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      
                      <!--[if mso | IE]>
                      </td>
                    </tr>
                  </table>
                  <![endif]-->

                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
      <!--[if mso | IE]>
      </td>
    </tr>
  </table>
  <![endif]-->
      
  <!--[if mso | IE]>
  <table border="0" cellpadding="0" cellspacing="0" width="660" align="center" style="width:660px;">
    <tr>
      <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]-->

        <div class="mobile-space" style="font-size:1px;line-height:30px;">&nbsp;</div>

      <!--[if mso | IE]>
      </td>
    </tr>
  </table>
  <![endif]-->



  ...I can't put the complete code on my post to be under 30000 signs.

  </div>
</body>
</html>

Спасибо за помощь,


responsive email-client html-email
person P. Wack    schedule 25.08.2016    source источник
comment
Пожалуйста, поделитесь своим кодом в вопросе.   -  person vijayst    schedule 25.08.2016

Ответы (2)


arrow_upward
2
arrow_downward

Ну, это обычная проблема с iOS 9 и пустым пространством между div. Даже если размер шрифта установлен на 0 пикселей, он действует так, как будто он все еще здесь. Вам придется минимизировать свой HTML, чтобы он снова выглядел красиво.

Я сделал это для вас: http://pastebin.com/0RX92bat и вот как это выглядит на Litmus на iPad Retina с почтой http://imgur.com/DfziId3

Вы можете использовать https://github.com/kangax/html-minifier, чтобы получить тот же результат. с этими опциями:

{ collapseWhitespace: true,
  removeEmptyAttributes: true,
  minifyCSS: true }
person iRyusa    schedule 25.08.2016

arrow_upward
0
arrow_downward

Я сталкивался с этой проблемой много раз, и самое простое решение, которое я нашел, это добавить margin: 0 -2px; к каждому display: inline-block;:

`<div style="display: inline-block; margin: 0 -2px;">`

Та же проблема существует и в Интернете, как указано в разделе Борьба с пространством. Между встроенными блочными элементами в CSS Tricks. Эта статья включает в себя несколько других примеров на случай, если вам не нравится хак с отрицательной маржой.

person Ted Goas    schedule 25.08.2016