回复电子邮件签名问题

我最近创建了一些电子邮件签名，他们看起来很棒，但他们可以收到或回复几封电子邮件;回复电子邮件签名问题

徽标被压扁，有时徽标在回复时变得非常大。
接收电子邮件或发送回复时，字体颜色变黑。
见它是如何有时看起来所附照片和酒吧去在屏幕上

我用雷鸟，以发送电子邮件，但我不知道这有什么影响。

如果有人有任何建议，以清理这些，我将不胜感激。

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <meta name="keywords" content=""> 
    <meta name="description" content=""> 
    </head> 
    <body style="background:#eee;padding:0;margin:0;"> 

    <div style="width:600px;background:#fff;font-family:Arial, Helvetica, sans-serif;"> 
     <div style="padding:15px 0px;background:#0c6eb7;color:#fff;"> 
     <div style="padding:5px 15px;"> 
      <h2 style="margin:0;font-size:18px;text-transform:uppercase;font-weight:black;">Health Your Way</h2> 
      <h3 style="margin:0;margin-bottom:3px;font-size:14px;font-weight:normal;">&nbsp;</h3> 
     </div> 
     </div> 
     <div style="padding:15px 15px;"> 
      <p style="margin-top:0px;"></p> 
      <h4 style="margin:0;font-size:12px;font-weight:normal;color:#0c6eb7;"> 
       <img src="http://i.imgur.com/vyyo3Cs.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <a href="mailto:[email protected]" style="color:inherit;text-decoration:none;">[email protected]</a> 
       <b style="display:inline-block;margin:0px 10px;font-weight:normal;">|</b> 
       <img src="http://i.imgur.com/Uwbw49m.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <a href="tel:08006446414" style="color:inherit;text-decoration:none;">0800 644 6414</a> 
       <b style="display:inline-block;margin:0px 10px;font-weight:normal;">|</b> 
       <img src="http://i.imgur.com/jpcSK1r.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <a href="http://www.healthyourway.co.uk" style="color:inherit;text-decoration:none;">healthyourway.co.uk</a> 
      </h4> 
      <h4 style="margin:0;margin-top:10px;font-size:12px;font-weight:normal;color:#0c6eb7;"> 
       <img src="http://i.imgur.com/bBNmf7g.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <div style="display:inline-block;vertical-align:middle;width:calc(100% - 30px);">Queens Gardens Business Centre, 31 Ironmarket, Newcastle-under-Lyme<br>Staffordshire, ST5 1RP</div> 
      </h4> 
     </div> 
     <div style="width:100%;background:#fff;border-top:1px solid #eee;"> 
     <div style="padding:15px;padding-bottom:1px;color:#cccccc;font-size:11px;"> 
      <img src="http://i.imgur.com/ZSms6VI.jpg" style="height:60px;margin-right:10px;"> 
      <img src="http://i.imgur.com/sXHE0gU.jpg" style="height:60px;"> 
      <p>This message may contain confidential information. If you are not the intended recipient please inform the sender that you have received the message in error before deleting it. 
Please do not disclose, copy or distribute information in this e-mail or take any action in reliance on its contents: to do so is strictly prohibited and may be unlawful.</p> 
     </div> 
     </div> 
    </div> 

    </body> 
</html>

来源

2017-02-26 David Mason

你有什么样的代码实现与之合作的签名？ –

此外，不同的电子邮件客户端可以以不同方式处理样式。你说你正在使用Thunderbird发送电子邮件，但是客户是以这种格式接收他们？你在看Thunderbird中的'Sent'文件夹吗？ –

上面添加的代码，对不起。客户正在将其发回，因此无法确定他们正在使用哪个电子邮件客户端，但延伸的徽标位于iPhone –

我进行了细微的调整，你在原来的文章粘贴代码。

我havd做的是：

的页脚图像（没有宽度）增加高度。由于只有高度，图像应按比例调整大小。
为代码添加颜色代替文本而不是继承。

给下面的代码一个镜头，让我知道它是否工作。

干杯


 

 
    <html lang="en"> 
 
     <head> 
 
     <meta charset="utf-8"> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
     <meta name="keywords" content=""> 
 
     <meta name="description" content=""> 
 
     </head> 
 
     <body style="background:#eee;padding:0;margin:0;"> 
 
    
 
     <div style="width:600px;background:#fff;font-family:Arial, Helvetica, sans-serif;"> 
 
      <div style="padding:15px 0px;background:#0c6eb7;color:#fff;"> 
 
      <div style="padding:5px 15px;"> 
 
       <h2 style="margin:0;font-size:18px;text-transform:uppercase;font-weight:black; color:#ffffff;">Health Your Way</h2> 
 
       <h3 style="margin:0;margin-bottom:3px;font-size:14px;font-weight:normal;">&nbsp;</h3> 
 
      </div> 
 
      </div> 
 
      <div style="padding:15px 15px;"> 
 
       <p style="margin-top:0px;"></p> 
 
       <h4 style="margin:0;font-size:12px;font-weight:normal;color:#0c6eb7;"> 
 
        <img src="http://i.imgur.com/vyyo3Cs.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <a href="mailto:[email protected]" style="color:#0c6eb7;text-decoration:none;">[email protected]</a> 
 
        <b style="display:inline-block;margin:0px 10px;font-weight:normal;">|</b> 
 
        <img src="http://i.imgur.com/Uwbw49m.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <a href="tel:08006446414" style="color:#0c6eb7;text-decoration:none;">0800 644 6414</a> 
 
        <b style="display:inline-block;margin:0px 10px;font-weight:normal;">|</b> 
 
        <img src="http://i.imgur.com/jpcSK1r.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <a href="http://www.healthyourway.co.uk" style="color:#0c6eb7;text-decoration:none;">healthyourway.co.uk</a> 
 
       </h4> 
 
       <h4 style="margin:0;margin-top:10px;font-size:12px;font-weight:normal;color:#0c6eb7;"> 
 
        <img src="http://i.imgur.com/bBNmf7g.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <div style="display:inline-block;vertical-align:middle;width:calc(100% - 30px);color:#0c6eb7;">Queens Gardens Business Centre, 31 Ironmarket, Newcastle-under-Lyme<br>Staffordshire, ST5 1RP</div> 
 
       </h4> 
 
      </div> 
 
      <div style="width:100%;background:#fff;border-top:1px solid #eee;"> 
 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="padding:15px;color:#cccccc;font-size:11px;"> 
 
       
 
      <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td width="160"><img src="http://i.imgur.com/ZSms6VI.jpg" width="150" height="60" style="width:150px;height:60px;"></td> 
 
     <td><img src="http://i.imgur.com/sXHE0gU.jpg" width="150" height="60" style="width:150px;height:60px;"></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
       
 
       
 
       </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="padding:15px;color:#cccccc;font-size:11px;"><p>This message may contain confidential information. If you are not the intended recipient please inform the sender that you have received the message in error before deleting it. 
 
    Please do not disclose, copy or distribute information in this e-mail or take any action in reliance on its contents: to do so is strictly prohibited and may be unlawful.</p></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<div> 
 
       
 
      </div> 
 
     </div> 
 
    
 
     </body> 
 
    </html>

来源

2017-02-26 22:58:23 Syfer

Hi @Syfer，我试过了您的代码并感谢您。我似乎仍然得到了如图3所示的拉伸图像，但现在当我从iPhone回复时，图像也从标识中消失（我认为这是来自iPhone回复方，因为我可以看到图像在我的回复框中消失。“你修正了一件事......大声笑“虽然 –

很受欢迎嗨@DavidMason，我将包含图像的div改成了表格以修复图像，我认为这样可以修复现在的图像，请告诉我。 – Syfer

这很棒@Syfer，工作得很好，iPhone电子邮件的间距非常好，你知道为什么图像不会像上面的图片一样从iPhone回复吗？ –

回复电子邮件签名问题

回答

相关问题