私は現在、電子メールのフッターで遊んでいますが、私は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&q=https://www.facebook.com/&source=gmail&ust=1507498301190000&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&q=http://www.skype.com/en/&source=gmail&ust=1507498301190000&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&q=https://twitter.com/&source=gmail&ust=1507498301190000&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&q=https://www.linkedin.com/nhome/&source=gmail&ust=1507498301190000&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">
これは、それが電子メールに表示されている方法であるべきでどのようにです:
私の質問が理由だろうこの背後に、また、この振る舞いを回避する方法。
メールクライアントは非常に刺激的です。 campaignmonitor.com/css/とLitmusでメールテンプレートの作成に関するヘルプをご覧ください。 – Phix
そのような方法で 'img'を配置するためにあなたが宣言したCSS規則は何ですか?ルールの一部が削除されている可能性があります。ほとんどの電子メールクライアントではサポートされていない可能性があります。一般的な経験則では、電子メールクライアントのHTML解析では、基本に固執する(90年代のように)、テーブルを使用して構造化し、シンプルにしてください。 – UncaughtTypeError