Question

我最近创建了一些电子邮件签名，他们在发送时看起来很棒，但他们可以在收到或回复时收到一些电子邮件;

徽标被压扁，有时徽标会在回复时变得非常大。
收到电子邮件或发送回复时，字体颜色变黑。
请参阅附页照片，了解它有时看起来如何并且横条显示在屏幕上

我使用Thunderbird发送电子邮件，但我不知道这是否有任何影响。

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

    <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:admin@healthyourway.co.uk" style="color:inherit;text-decoration:none;">admin@healthyourway.co.uk</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>

Answer 1

我对您在原始帖子中粘贴的代码进行了微调。

我所做的是：

在页脚图像上添加高度（无宽度）。由于只有高度，图像应按比例调整大小。
为代码添加了颜色而不是继承颜色。

给出以下代码，让我知道它是否有用。

干杯

   

     <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:admin@healthyourway.co.uk" style="color:#0c6eb7;text-decoration:none;">admin@healthyourway.co.uk</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>

电子邮件签名问题回复

1 个答案: