L'image HTML ne se positionne pas dans le courrier électronique

Question

Je joue avec les pieds de page de nos jours et lorsque je crée un modèle dans CodePen, ça semble bien. Mais lors de l'envoi dans un e-mail réel, il ne positionne pas l'image correctement, et d'autres sélecteurs CSS sont également supprimés du code.

Voici le code:

<div text="#000000" bgcolor="#FFFFFF"> 
Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case 
ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in 
ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu 
mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad 
vix mundi alterum, integre urbanitas intellegam vix in.<br> 
<br> 
<img style="min-width:640px;display:block;margin:0;padding:0" class="m_1407183270023890199mobileOff" height="1" width="640"> 
<table cellspacing="0" cellpadding="0" bgcolor="#F6F6F6" width="100%" border="0"> 
    <tbody> 
    <tr> 
     <td valign="top" align="center" width="100%"> 

     <table cellspacing="0" cellpadding="0" align="center" height="250" width="640" border="0"> 
      <tbody> 
      <tr> 
       <td><img src="https://ci6.googleusercontent.com/proxy/JAbXR1Vkz0jOIyy2fakaw4tgm7dpLH4RxhPcLi6NFo2q0avwsD5UAq1CjxS4oYCItQgp59V3xvh98KEEWlZLjLjFKGo=s0-d-e1-ft#http://content.smohai.com/email/imageteszt.png" valign="center" align="left" height="200" width="145" class="CToWUd"></td> 
      </tr> 
      <tr> 
       <td class="m_1407183270023890199name" bgcolor="#FFFFFF" height="80px" width="600px"> LOGO </td> 
      </tr> 
      <tr> 
       <td class="m_1407183270023890199name" valign="bottom" bgcolor="#FFFFFF" height="40px" width="600px"> Tamas Smohai </td> 
      </tr> 
      <tr> 
       <td class="m_1407183270023890199designation" valign="top" bgcolor="#FFFFFF" height="30px" width="600px"> Director </td> 
      </tr> 
      <tr> 
       <td bgcolor="#4a4a4a" height="30px" width="600px"> 
       <table class="m_1407183270023890199links" cellspacing="0" cellpadding="0" align="right" border="0"> 
        <tbody> 
        <tr> 
         <td> 
         <table class="m_1407183270023890199link" cellspacing="0" cellpadding="0" align="right" border="0"> 
          <tbody> 
          <tr> 
           <td class="m_1407183270023890199link1"> <a href="https://www.facebook.com/" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=hu&amp;q=https://www.facebook.com/&amp;source=gmail&amp;ust=1507498301190000&amp;usg=AFQjCNGlfrj0LoC5g9LZGFffv2BsCrjaig"><img src="https://ci3.googleusercontent.com/proxy/lqmSxKdWYmc30Ry2EBqcFG-dedYpuVaY1xBn0QrkY70jv724sm1X_bYeCGU_gdj8zHqFR0rgiIVspDVQsck0INJPCXtToAIUc5bTCZwKiA=s0-d-e1-ft#http://content.smohai.com/sample/Type011/facebookicon.png" alt=" " height="12" width="7" class="CToWUd"></a> </td> 
           <td class="m_1407183270023890199link2"> <a href="http://www.skype.com/en/" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=hu&amp;q=http://www.skype.com/en/&amp;source=gmail&amp;ust=1507498301190000&amp;usg=AFQjCNHJILVr-zIRsq1TcT2g7PI8ME8Zag"><img src="https://ci3.googleusercontent.com/proxy/ErVHPNyBh8iNJQIWTagISNt60af8wLQ47tT-Q3kecWmu7gTzNV-LMu9Pri7klaXpCXt3W6EKpIC6Iap479bmAf_7g1bc87hMFBawOg=s0-d-e1-ft#http://content.smohai.com/sample/Type011/skypeicon.png" alt=" " height="12" width="12" class="CToWUd"></a> </td> 
           <td class="m_1407183270023890199link3"> <a href="https://twitter.com/" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=hu&amp;q=https://twitter.com/&amp;source=gmail&amp;ust=1507498301190000&amp;usg=AFQjCNEzHhrZ3eUHvnDuquuK4syrwwrwLw"><img src="https://ci3.googleusercontent.com/proxy/ENpU-chMPdg9_0gGBgU2wrtizP7Q_z3hTJsj9I7_nb-w8O9wHi_HSC9zYRmpaapy7L5LTZvA_AisgOT8OOh8Z1UHbrYStaFFNbevWEwr=s0-d-e1-ft#http://content.smohai.com/sample/Type011/twittericon.png" alt=" " height="9" width="12" class="CToWUd"></a> 
           </td> 
           <td class="m_1407183270023890199link4"> <a href="https://www.linkedin.com/nhome/" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=hu&amp;q=https://www.linkedin.com/nhome/&amp;source=gmail&amp;ust=1507498301190000&amp;usg=AFQjCNETGi2Ysdgwp9zaWep5YqTVpcx3dw"><img src="https://ci5.googleusercontent.com/proxy/r-Z1eRyS9qlfdov25U2gflMYDC60iXEcxsiAG-n21ugZYvh_c6DqjOrP7kcKJBsVRjUaQWMNTQCkgaQe3VhHbIMjQ9sUUxE-Lj5ghVYK9Q=s0-d-e1-ft#http://content.smohai.com/sample/Type011/linkedinicon.png" alt=" " height="11" width="10" class="CToWUd"></a> </td> 
          </tr> 
          </tbody> 
         </table> 
         </td> 
        </tr> 
        </tbody> 
       </table> 
       </td> 
      </tr> 
      <tr> 
       <td bgcolor="#ff6458" height="70px" width="600px"> 
       <table class="m_1407183270023890199icons" cellspacing="0" cellpadding="0" border="0"> 
        <tbody> 
        <tr> 
         <td> 
         <table cellspacing="0" cellpadding="0" border="0"> 
          <tbody> 
          <tr> 
           <td class="m_1407183270023890199icon1"> <img src="https://ci4.googleusercontent.com/proxy/FUCTXNf3Zvc4XO-IEtdpEzLZdGHDBGyR04NOTk4hKCboSZ_ItGSqKuXi73a4vLsFmVYcAY9ZOsTzu32Vgu_ZXUrsnMOaiCZQH6QYaDI=s0-d-e1-ft#http://content.smohai.com/sample/Type011/mobileicon.png" alt=" " height="12" width="8" class="CToWUd"> </td> 
           <td class="m_1407183270023890199icontext2"><a href="tel:+44%207936%20434744" value="+447936434744" target="_blank">+44(0)7936434744</a></td> 
           <td class="m_1407183270023890199devider2">| </td> 
           <td class="m_1407183270023890199icon2"> <img src="https://ci5.googleusercontent.com/proxy/YQIw17P66kIKRUmccVn99_KDkm4ArL6P7THZm4Z4nr4L-RYi4l8XfMbt3P1XC5sB0NdRX9iiqzLkGJN77rqlyw3jivYvNfHTMQ90UAgP=s0-d-e1-ft#http://content.smohai.com/sample/Type011/messageicon.png" alt=" " height="11" width="15" class="CToWUd"></td> 
           <td class="m_1407183270023890199icontext3"><a class="m_1407183270023890199moz-txt-link-abbreviated" href="mailto:info@stayalivelonger.co.uk" target="_blank">info@stayalivelonger.co.uk</a></td> 
          </tr> 
          </tbody> 
         </table> 
         </td> 
        </tr> 
        <tr class="m_1407183270023890199address_bg"> 
         <td> 
         <table cellspacing="0" cellpadding="0" border="0"> 
          <tbody> 
          <tr> 
           <td class="m_1407183270023890199address"> Church Road, Rory 
           Reay Avenue, Los Angeles. </td> 
          </tr> 
          </tbody> 
         </table> 
         </td> 
        </tr> 
        </tbody> 
       </table> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    </tbody> 
</table><div class="yj6qo"></div><div class="adL"> 

Voici comment il devrait être et comment il est affiché dans un e-mail:

Ma question serait la raison derrière cela, et aussi comment contourner ce comportement.

Answer 1

Vous avez publié votre code, mais pas vos cours. Je pense que je détecte le positionnement et cela ne fonctionne vraiment pas dans tous les domaines avec le développement de courrier électronique. Je sais que cela ressemble à un développement frontal, mais les règles sont différentes.

Le code suivant vous donnera un arrière-plan bicolore et une image. Il ne fonctionne pas avec Outlook ou Yahoo !, il a besoin de quelques ajustements pour fonctionner correctement dans le mobile, mais cela fonctionne dans la plupart des clients de messagerie comme IOS, Apple Mail et Gmail.

C'est le code jsFiddle: https://jsfiddle.net/wallyglenn/kdxwg8ct/

Bonne chance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
</head> 
<body> 
<table height="600" width="800" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" style="background: linear-gradient(to bottom, black 0%,black 50%,#000000 50%,red 50%,red 100%); border: 4px solid #000000;"> 
    <tr> 
    <td valign="top"> 
     <img src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" border="8" style="border: 8px solid #ffffff; Margin-left: 40px;" vspace="60"/> 
    </td> 
    </tr> 
</table> 

</body> 
</html>