1. дома
  2. Вопрос и ответ
  3. Как предотвратить встроенный блок из моего письма в стек на iPad?

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

2016-08-25 5 views
1

Я изначально создал электронное письмо с использованием MJML и адаптировал код для улучшения мобильной версии.Как предотвратить встроенный блок из моего письма в стек на iPad?

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

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

Вот предварительный просмотр вопросов: enter image description here

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

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

<!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>

Than k вам за помощь,

источник

2016-08-25 P. Wack

+0

Пожалуйста, поделитесь своим вопросом в вопросе. – vijayst

ответ

2

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

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

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

{ collapseWhitespace: true, 
    removeEmptyAttributes: true, 
    minifyCSS: true }

источник

2016-08-25 16:50:42 iRyusa

+0

Спасибо iRyusa! Он работал очень хорошо. –

0

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

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

Та же проблема существует в Интернете, как описано в Fight the Space Between Inline-Block Elements на CSS-трюках. Эта статья содержит несколько других примеров, если вам не нравится взлом отрицательного маржи.

источник

2016-08-25 18:00:25

 Смежные вопросы

  • Нет связанных вопросов^_^