電子メールのインラインブロックがiPad上にスタックするのを防ぐにはどうすればいいですか？

私はもともとMJMLを使用して電子メールを作成し、そのコードをモバイルバージョンを改善するために適合させました。電子メールのインラインブロックがiPad上にスタックするのを防ぐにはどうすればいいですか？

1）私は電子メールをクロムでチェックし、リトマスを持つすべてのデスクトップクライアントでテストしていますが、電子メールスタックのインラインブロックの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>

より

出典

2016-08-25 P. Wack

あなたのコードを質問に記入してください。 – vijayst

よくある問題は、iOS 9とdivの間の空白スペースです。 font-sizeが0pxに設定されていても、まだここにあるように動作します。もう一度見栄えを良くするためにHTMLを小さくしなければなりません。

私はあなたのためにそれをやった：http://pastebin.com/0RX92bat、ここではそれはあなたがこれらのオプションを使用して同じ結果を得るためにhttps://github.com/kangax/html-minifierを使用することができますメールhttp://imgur.com/DfziId3とiPadの網膜上のリトマスに

をどのように見えるかです：

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

出典

2016-08-25 16:50:42 iRyusa

ありがとうiRyusa！それはとてもうまくいった。 –

私は」この問題に何度も直面していて、私が見つけたもっとも簡単な修正は、それぞれdisplay: inline-block;にmargin: 0 -2px;を追加することです。

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

CSS TricksのFight the Space Between Inline-Block Elementsで概要を説明したのと同じ問題がWeb上に存在します。この記事では、マイナスマージンハックが気に入らない場合のためのいくつかの他の例を紹介します。

出典

2016-08-25 18:00:25

電子メールのインラインブロックがiPad上にスタックするのを防ぐにはどうすればいいですか？

答えて

関連する問題