HTML图片未定位在电子邮件

时间：2017-10-13 21:09:34

标签： html css image email positioning

我现在正在使用电子邮件页脚，当我在CodePen中创建模板时，它看起来很好。但是当在实际的电子邮件中发送它时，它没有正确定位图像，并且还从代码中删除了其他CSS选择器。

这是代码：

＆＃13;
＆＃13; 
<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">

  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

这是它应该如何以及如何在电子邮件中显示：

Mail image positioning problem

我的问题是这背后的原因，以及如何解决这种行为。

1 个答案:

答案 0 :(得分：0)

您发布了代码，但不是您的课程。我认为我发现了定位，而且通过电子邮件开发并没有全面发挥作用。我知道它看起来像前端开发，但它有不同的规则。

以下代码将为您提供双色背景和图像。它不适用于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>
相关问题
最新问题