1. 홈
  2. 질의 응답
  3. 내 이메일의 인라인 블록이 iPad에 쌓이는 것을 방지하려면 어떻게해야하나요?

내 이메일의 인라인 블록이 iPad에 쌓이는 것을 방지하려면 어떻게해야하나요?

2016-08-25 10 views
1

원래 MJML을 사용하여 전자 메일을 생성하고 모바일 버전을 향상시키는 코드를 수정했습니다.내 이메일의 인라인 블록이 iPad에 쌓이는 것을 방지하려면 어떻게해야하나요?

1) 나는 전자 메일을 크롬으로 검사하고 리트머스가있는 모든 데스크톱 클라이언트로 테스트하는 동안 아무런 문제가 없지만 이메일 스택 인라인 블록의 ipad 버전입니다.

2) 미디어 쿼리를 사용하여 휴대 기기에만 표시되는 일부 요소는 이메일을 테스트 할 때 표시되지 않지만 Chrome에서는 볼 수 있습니다.

<!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>
: 여기 Html file

코드의 시작입니다 : 여기 enter image description here

HTML 파일의 링크입니다 : 여기

는 문제의 미리보기입니다

보다 큼 k를 도와 주겠다.

출처

2016-08-25 P. Wack

+0

질문에 코드를 입력하십시오. – vijayst

답변

2

iOS 9와 div 사이의 공백 문제가 있습니다. font-size가 0px로 설정된 경우에도 여전히 여기에있는 것처럼 작동합니다. HTML을 멋지게 보이게하려면 HTML을 축소해야합니다.

나는 당신을 위해 그것을했다 : http://pastebin.com/0RX92bat를 여기가 http://imgur.com/DfziId3

당신은 이러한 옵션과 같은 결과를 얻을 수 https://github.com/kangax/html-minifier을 사용할 수있는 메일과 아이 패드 레티 나에 리트머스에 보이는 방법은 다음과 같습니다

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

출처

2016-08-25 16:50:42 iRyusa

+0

감사합니다. 그것은 아주 잘 작동했습니다. –

0

나 ' 여러 번이 문제로 실행했습니다 내가 발견 한 가장 쉬운 수정은 margin: 0 -2px;display: inline-block; 각에 추가하는 것입니다

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

CSS 트릭의 Fight the Space Between Inline-Block Elements에 설명 된 것과 같은 문제가 웹에 있습니다. 이 기사에는 부정적인 여백 해킹이 마음에 들지 않을 경우에 대비 한 몇 가지 다른 예가 포함되어 있습니다.

출처

2016-08-25 18:00:25

 관련 문제

  • 관련 문제 없음^_^