1. Accueil
  2. Question et réponse
  3. Pourquoi un grand espace blanc apparaît-il dans la signature électronique à deux colonnes dans les iPhone 6s, 7 et 8 entre l'image et les informations de contact?

Pourquoi un grand espace blanc apparaît-il dans la signature électronique à deux colonnes dans les iPhone 6s, 7 et 8 entre l'image et les informations de contact?

2017-10-11 12 views
0

J'essaie de faire une signature Gmail. Quand je cours le code par Litmus, il montre qu'il y a un grand écart sur l'iphone 6s, 7 et 8 entre l'image et l'information de contact sur la droite. Comment puis-je corriger la mise en page dans ce client de messagerie? Il semble juste dans tous les autres clients testés. Voici le code:Pourquoi un grand espace blanc apparaît-il dans la signature électronique à deux colonnes dans les iPhone 6s, 7 et 8 entre l'image et les informations de contact?

<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>Kendra Doss HTML Signature</title> 
 
    
 
\t <style type="text/css"> 
 
     /* Client-Specific styles */ 
 
     #outlook a \t \t { padding:0; } /* Force Outlook to provide a "view in browser" menu link. */ 
 
     body \t \t \t \t { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; border:0; } 
 
\t \t 
 
     /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */ 
 
     .ExternalClass \t { width:100%; } /* Force Hotmail to display emails at full width */ 
 
     .ExternalClass, 
 
\t \t .ExternalClass p, 
 
\t \t .ExternalClass span, 
 
\t \t .ExternalClass font, 
 
\t \t .ExternalClass td, 
 
\t \t .ExternalClass div { line-height:100%; } /* Force Hotmail to display normal line spacing.*/ 
 
     img \t \t \t \t { outline:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; } 
 
     a img \t \t \t \t { border:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; } 
 
     p \t \t \t \t \t { margin:0px 0px !important; } 
 
     table \t \t \t \t { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } 
 
     table td \t \t \t { border-collapse:collapse; } 
 
    
 
     /* iPad Styles */ 
 
     @media only screen and (max-width: 640px) { 
 
      a[href^="tel"], a[href^="sms"] { 
 
\t \t \t \t text-decoration:none; 
 
\t \t \t \t color:#000000; 
 
\t \t \t \t pointer-events:none; 
 
\t \t \t \t cursor:default; 
 
      } 
 
      .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { 
 
\t \t \t \t text-decoration:default; 
 
\t \t \t \t color:#000000 !important; 
 
\t \t \t \t pointer-events:auto; 
 
\t \t \t \t cursor:default; 
 
      } 
 
     } 
 
      
 
     /* iPhone Styles */ 
 
     @media only screen and (max-width: 380px) { 
 
      a[href^="tel"], a[href^="sms"] { 
 
\t \t \t \t text-decoration:none; 
 
\t \t \t \t color:#000000; 
 
\t \t \t \t pointer-events:none; 
 
\t \t \t \t cursor:default; 
 
      } 
 
      .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { 
 
\t \t \t \t text-decoration:default; 
 
\t \t \t \t color:#000000 !important; 
 
\t \t \t \t pointer-events:auto; 
 
\t \t \t \t cursor:default; 
 
      } 
 
     } 
 
\t \t 
 
\t \t /* Responsive styles */ 
 
\t  @media only screen and (max-width: 380px) { 
 
\t  \t td[class=wrapper] { 
 
\t  \t \t padding-top:0 !important; 
 
\t  \t \t padding-left:0 !important; 
 
\t  \t \t padding-right:0 !important; 
 
\t  \t } 
 
\t \t \t 
 
\t \t \t table[class=mobile-view], td[class=mobile-view], img[class=mobile-view] { 
 
\t  \t \t width:300px !important; \t 
 
\t  \t \t height:auto !important;  
 
\t  \t } 
 
\t \t \t 
 
\t  \t td[class=clump] { 
 
\t  \t \t display:block !important; 
 
\t  \t \t padding-left:0 !important; 
 
\t  \t \t padding-right:0 !important; 
 
\t \t \t \t width:100% !important; 
 
\t  \t } 
 
\t \t \t 
 
\t  \t td[class=aligncenter] { 
 
\t  \t \t width:340px !important; \t 
 
\t  \t \t height:auto !important; 
 
\t  \t \t text-align:center !important; 
 
\t  \t } 
 
\t  } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
<table width="340" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> 
 
\t <tbody> 
 
\t \t <tr> 
 
      <td width="100" valign="top" align="left" class="clump" style="padding:0 0 0px; 0;"> 
 
      \t <!-- Add your Avatar --> 
 
       <img src="https://i.imgur.com/BMWqfVH.jpg" alt="Kendra Doss" border="0" width="100" style="padding:10px 0px 0px 10px; display:block; border:0; outline:0;" /> 
 
      </td> 
 
      <td valign="top" align="left" class="clump" style="padding:10px 0px 0px 0px;"> 
 
\t \t \t \t <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> 
 
\t \t \t \t \t <tbody> 
 
         <tr> 
 
          <td td width="240" style="padding:0px 0px 0px 10px;"> 
 
           <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> 
 
            <tr> 
 
             <!-- Edit your Name or Title --> 
 
             <td style="font-family: Helvetica, Arial, sans-serif; font-size:18px; line-height:24px; font-weight:800; text-transform:uppercase; color:#e34346; letter-spacing:1px;">Kendraa Doss</td> 
 
            </tr> 
 
            <tr> 
 
             <!-- Edit your job title or subtitle --> 
 
             <td height="15" style="font-family: Helvetica, Arial, sans-serif; font-size:10px; line-height:18px; font-weight:400; color:#6e7482; letter-spacing:1px;">UX &amp; Visual Designer</td> 
 
            </tr> 
 
           </table> 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          
 
          <td style="padding:0 0 0 10px;"> 
 
           <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> 
 
            <tbody> 
 
             <tr><td height="2" style="padding:0 0 0 10px; font-size: 2px; line-height: 2px; border-bottom: 1px solid #daddee;">&nbsp;</td></tr> 
 
             <tr> 
 
              <td width="60%" class="clump"> 
 
               <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> 
 
                <tbody> 
 
                 <tr> 
 
                  <td width="25" height="30" valign="middle"><img src="https://i.imgur.com/ZoPNmPa.png" alt="Phone" border="0" width="18" style="display:block; border:0; outline:none; padding:5px 0 0 0;" /></td> 
 
                  <!-- Edit your Phone number --> 
 
                  <td width="" height="30" valign="middle" align="left" style="padding:5px 0 0 0; font-family: Helvetica, Arial, sans-serif; font-size:12px; line-height:24px; font-weight:400; color:#2f3542;"> 719.216.3402</td> 
 
                 </tr> 
 
                </tbody> 
 
               </table> 
 
              </td> 
 

 
             </tr> 
 
            </tbody> 
 
           </table> 
 
          </td> 
 
         </tr> 
 
         
 
\t \t \t \t \t \t <tr> 
 
          <td style="padding:0 0 0 10px;"> 
 
           <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> 
 
            <tbody> 
 
             <tr> 
 
              
 
              
 
              <td width="33%" class="clump"> 
 
               <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> 
 
                <tbody> 
 
                 <tr> 
 
                  <td width="25" height="20" valign="middle"><img src="https://i.imgur.com/hnMRswj.png" alt="Web" border="0" width="18" style="display:block; border:0; outline:none;" /></td> 
 
                  <!-- Edit your website URL --> 
 
                  <td width="" height="20" valign="middle" align="left" style="font-family: Helvetica, Arial, sans-serif; font-size:12px; line-height:24px; font-weight:400; color:#2f3542;"><a href="http://www.kendradoss.com" style="text-decoration:none; color:#2f3542;">kendradoss.com</a></td> 
 
                 </tr> 
 
                </tbody> 
 
               </table> 
 
              </td> 
 
             </tr> 
 
            </tbody> 
 
           </table> 
 
          </td> 
 
         </tr> 
 
\t \t \t \t \t </tbody> 
 
\t \t \t \t </table> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table> 
 
</body>

Ci-joint également des captures d'écran de Litmus de la façon dont il apparaît dans l'iPhone Litmus screenshot

Source

2017-10-11 Kendra Doss

Répondre

0

J'ai trouvé la nécessité de nettoyer le code un peu depuis il y a une référence aux plugins externes. Après cela, j'ai testé votre code dans IPhone 5, 6, 6plus (ne peut pas le tester sur 7 encore), IPad, et Galaxy S5 et n'a pas pu trouver de problème.

est ici une version modifiée de votre code:

<html> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Kendra Doss HTML Signature</title> 
    <head> 

    <style type="text/css"> 
     /* Client-Specific styles */ 
     #outlook a   { padding:0; } /* Force Outlook to provide a "view in browser" menu link. */ 
     body    { width:100% ; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; border:0; } 

     /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */ 
     .ExternalClass  { width:100%; } /* Force Hotmail to display emails at full width */ 
     .ExternalClass, 
     .ExternalClass p, 
     .ExternalClass span, 
     .ExternalClass font, 
     .ExternalClass td, 
     .ExternalClass div { line-height:100%; } /* Force Hotmail to display normal line spacing.*/ 
     img    { outline:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; } 
     a img    { border:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; } 
     p     { margin:0px 0px ; } 
     table    { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } 
     table td   { border-collapse:collapse; } 

     /* iPad Styles */ 
     @media only screen and (max-width: 640px) { 
      a[href^="tel"], a[href^="sms"] { 
       text-decoration:none; 
       color:#000000; 
       pointer-events:none; 
       cursor:default; 
      } 
      .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { 
       text-decoration:default; 
       color:#000000 ; 
       pointer-events:auto; 
       cursor:default; 
      } 
     } 

     /* iPhone Styles */ 
     @media only screen and (max-width: 380px) { 
      a[href^="tel"], a[href^="sms"] { 
       text-decoration:none; 
       color:#000000; 
       pointer-events:none; 
       cursor:default; 
      } 
      .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { 
       text-decoration:default; 
       color:#000000 ; 
       pointer-events:auto; 
       cursor:default; 
      } 
     } 

     /* Responsive styles */ 
     @media only screen and (max-width: 380px) { 
      td[class=wrapper] { 
       padding-top:0 ; 
       padding-left:0 ; 
       padding-right:0 ; 
      } 

      table[class=mobile-view], td[class=mobile-view], img[class=mobile-view] { 
       width:300px ; 
       height:auto ;  
      } 

      td[class=clump] { 
       display:block ; 
       padding-left:0 ; 
       padding-right:0 ; 
       width:100% ; 
      } 

      td[class=aligncenter] { 
       width:340px ; 
       height:auto ; 
       text-align:center ; 
      } 
     } 
    </style> 
</head> 

<body> 

<table width="340" border="0" cellspacing="0" cellpadding="0" class="mobile-view"> 
    <tbody> 
     <tr> 
      <td valign="top" align="left" style="padding:10px 0px 0px 10px; display:block; border:0; outline:0;"> 
       <!-- Add your Avatar --> 
       <img src="https://i.imgur.com/BMWqfVH.jpg" alt="Kendra Doss" border="0" width="100" /> 
      </td> 
      <td valign="top" align="left" style="padding:10px 0px 0px 0px;"> 
       <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
        <tbody> 
         <tr> 
          <td td width="240" style="padding:0px 0px 0px 10px;"> 
           <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
            <tr> 
             <!-- Edit your Name or Title --> 
             <td style="font-family: Helvetica, Arial, sans-serif; font-size:18px; line-height:24px; font-weight:800; text-transform:uppercase; color:#e34346; letter-spacing:1px;">Kendraa Doss</td> 
            </tr> 
            <tr> 
             <!-- Edit your job title or subtitle --> 
             <td height="15" style="font-family: Helvetica, Arial, sans-serif; font-size:10px; line-height:18px; font-weight:400; color:#6e7482; letter-spacing:1px;">UX &amp; Visual Designer</td> 
            </tr> 
           </table> 
          </td> 
         </tr> 
         <tr> 
          <td style="padding:0 0 0 10px;"> 
           <table width="100%" border="0" cellspacing="0" cellpadding="0""> 
            <tbody> 
             <tr><td height="2" style="padding:0 0 0 10px; font-size: 2px; line-height: 2px; border-bottom: 1px solid #daddee;">&nbsp;</td></tr> 
             <tr> 
              <td width="60%" class="clump"> 
               <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> 
                <tbody> 
                 <tr> 
                  <td width="25" height="30" valign="middle"><img src="https://i.imgur.com/ZoPNmPa.png" alt="Phone" border="0" width="18" style="display:block; border:0; outline:none; padding:5px 0 0 0;" /></td> 
                  <!-- Edit your Phone number --> 
                  <td width="" height="30" valign="middle" align="left" style="padding:5px 0 0 0; font-family: Helvetica, Arial, sans-serif; font-size:12px; line-height:24px; font-weight:400; color:#2f3542;"> 719.216.3402</td> 
                 </tr> 
                </tbody> 
               </table> 
              </td> 

             </tr> 
            </tbody> 
           </table> 
          </td> 
         </tr> 
         <tr> 
          <td style="padding:0 0 0 10px;"> 
           <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
            <tbody> 
             <tr> 
              <td width="33%" class="clump"> 
               <table width="100%" border="0" cellspacing="0" cellpadding="0""> 
                <tbody> 
                 <tr> 
                  <td width="25" height="20" valign="middle"><img src="https://i.imgur.com/hnMRswj.png" alt="Web" border="0" width="18" style="display:block; border:0; outline:none;" /></td> 
                  <!-- Edit your website URL --> 
                  <td width="" height="20" valign="middle" align="left" style="font-family: Helvetica, Arial, sans-serif; font-size:12px; line-height:24px; font-weight:400; color:#2f3542;"><a href="http://www.kendradoss.com" style="text-decoration:none; color:#2f3542;">kendradoss.com</a></td> 
                 </tr> 
                </tbody> 
               </table> 
              </td> 
             </tr> 
            </tbody> 
           </table> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table> 
</body> 
</html>

post-scriptum Ne pas user "! Important" si vous ne le pensez pas. Une utilisation incorrecte pourrait chevaucher les styles rendant le problème de résoudre un enfer vivant.

Source

2017-10-11 23:35:21

0

Il est peut-être à voir avec la largeur fixée à 100% en CSS

td[class=clump] { 
    display:block !important; 
    padding-left:0 !important; 
    padding-right:0 !important; 
    width:100% !important; 
}

ensemble à:

td[class=clump] { 
    display:block !important; 
    padding-left:0 !important; 
    padding-right:0 !important; 
    width:auto !important; 
}

Il faut corriger les problèmes d'espacement.

Source

2017-10-11 23:59:59 Syfer

 Questions connexes

  • Aucun problème connexe^_^