2017-10-13 7 views
0

私は現在、電子メールのフッターで遊んでいますが、私はCodePenでテンプレートを作成するときれいに見えます。しかし、実際の電子メールで送信すると、画像が正しく配置されず、他のCSSセレクタもコードから削除されます。HTML画像が電子メールに配置されていません

これはコードです:

<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:[email protected]" target="_blank">[email protected]</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"> 

これは、それが電子メールに表示されている方法であるべきでどのようにです:

Mail image positioning problem

私の質問が理由だろうこの背後に、また、この振る舞いを回避する方法。

+1

メールクライアントは非常に刺激的です。 campaignmonitor.com/css/とLitmusでメールテンプレートの作成に関するヘルプをご覧ください。 – Phix

+1

そのような方法で 'img'を配置するためにあなたが宣言したCSS規則は何ですか?ルールの一部が削除されている可能性があります。ほとんどの電子メールクライアントではサポートされていない可能性があります。一般的な経験則では、電子メールクライアントのHTML解析では、基本に固執する(90年代のように)、テーブルを使用して構造化し、シンプルにしてください。 – UncaughtTypeError

答えて

0

あなたのコードは掲載しましたが、あなたのクラスは掲載していません。私はポジショニングを検出し、電子メールの開発では全面的に機能しません。フロントエンドの開発のように見えますが、それには異なるルールがあります。

次のコードは、2色の背景と画像を表示します。 OutlookやYahooではうまく動作しません。モバイルで正しく動作させるには微調整が必​​要ですが、IOS、Apple Mail、Gmailなどのほとんどの電子メールクライアントで動作します。

これはjsfiddleのコードです:https://jsfiddle.net/wallyglenn/kdxwg8ct/

幸運。

<!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> 
関連する問題