Outlook电子邮件签名看起来很紧张

时间:2019-06-12 07:08:13

标签: outlook html-email

当我将HTML文件插入Outlook中然后查看时,它看起来都是垂直拉伸的,但是当在浏览器中查看时,它看起来很完美。

当我在Outlook的“签名和固定”窗口中查看电子邮件签名时,它看起来也不错,但是当将其插入电子邮件正文中时,它会被拉伸。

从HTML代码中排除所有height属性。

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Wagma E-Signature</title>
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:100,200,400,500,600,700,800,900" />
  <style type="text/css">
  /* Client-Specific styles */
  #outlook a      { padding:0; } /* Force Outlook to provide a "view in browser" menu link. */
  body                { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; border:0; }
  /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
  .ExternalClass  { width:100%; } /* Force Hotmail to display emails at full width */
  .ExternalClass,
  .ExternalClass p,
  .ExternalClass span,
  .ExternalClass font,
  .ExternalClass td,
  .ExternalClass div { line-height:100%; } /* Force Hotmail to display normal line spacing.*/
  img                 { outline:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; }
  a img               { border:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; }
  p                   { margin:0px 0px !important; }
  table               { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  table td            { border-collapse:collapse; }
  /* iPad Styles */
  @media only screen and (max-width: 640px) {
    a[href^="tel"], a[href^="sms"] {
      text-decoration:none;
      color:#000000;
      pointer-events:none;
      cursor:default;
    }
    .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
      text-decoration:default;
      color:#000000 !important;
      pointer-events:auto;
      cursor:default;
    }
  }
  /* iPhone Styles */
  @media only screen and (max-width: 480px) {
    a[href^="tel"], a[href^="sms"] {
      text-decoration:none;
      color:#000000;
      pointer-events:none;
      cursor:default;
    }
    .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
      text-decoration:default;
      color:#000000 !important;
      pointer-events:auto;
      cursor:default;
    }
  }
  /* Responsive styles */
  @media only screen and (max-width: 480px) {
    td[class=wrapper] {
      padding-top:0 !important;
      padding-left:0 !important;
      padding-right:0 !important;
    }
    table[class=mobile-view], td[class=mobile-view], img[class=mobile-view] {
      width:320px !important;
      height:auto !important;
    }
    td[class=clump] {
      display:block !important;
      padding-left:0 !important;
      padding-right:0 !important;
      width:100% !important;
    }
    td[class=aligncenter] {
      width:300px !important;
      height:auto !important;
      text-align:center !important;
    }
  }
  </style>
</head>
<body>
  <table width="490" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
    <tbody>
      <tr>
        <td>
          <table width="490" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
            <tbody>
              <tr>
                <td width="130" align="left" valign="top" class="clump" style="padding:0 0 10px 0; background:#eff1f6;">
                  <!-- Add your Avatar -->
                  <img src="image/LOGO-WAGMA 320 X 320.png" alt="Avatar" border="0" width="120" style="padding:10px 0 0 10px; display:block; border:0; outline:none;" />
                </td>
                <td width="360" align="left" valign="top" class="clump" style="padding:10px 0 0 0; background:#eff1f6;">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                    <tbody>
                      <tr>
                        <td style="padding:0 10px 0 15px;" align="left">
                          <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                            <tr>
                              <!-- Edit your Name or Title -->
                              <td style="font-family:'Raleway', sans-serif, Arial; font-size:18px; line-height:24px; font-weight:900; color:#2f3542; padding:10px 0 0 0;">Andrew Magombedze</td>
                            </tr>
                            <tr>
                              <!-- Edit your job title or subtitle -->
                              <td style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:18px; font-weight:500; color:#6e7482; padding:0 0 10px 0;">SHEQ Consultant</td>
                            </tr>
                            <!-- Edit your job title or subtitle -->
                            <tr>
                              <td style="font-family:'Raleway', sans-serif, Arial; font-size:10px; line-height:12px; font-weight:400; color:#6e7482; padding:0 0 10px 0;">Bsc (Hons) Enviro, SAMTRAC<br>ISO 14001, 18001 Implementation<br>ISO 14001, 18001 Internal Auditor<br>Sacpcmp - CanCHSM</td>
                            </tr>
                            <tr>
                              <!-- Edit your Address -->
                              <td style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:18px; font-weight:600; color:#2f3542; padding:5px 0 0 0;">Office 192 Woodlands Gardens, 92 Bellairs Drive, Northriding, Randburg</td>
                            </tr>
                            <tr>
                              <!-- Edit your website's URL -->
                              <td style="font-family:'Raleway', sans-serif, Arial; font-size:16px; line-height:30px; font-weight:800; color:#60d853; padding:0 0 10px 0;"><a href="https://wagma-sheq.co.za" target="_blank" style="text-decoration:none; color:#60d853;">Wagma-SHEQ.co.za</a></td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table width="490" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
            <tbody>
              <tr>
                <td width="63%" style="padding:12px 0 5px 10px; background:#e1e4ed;">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                    <tbody>
                      <tr>
                        <td width="50%" class="clump">
                          <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                            <tbody>
                              <tr>
                                <td width="25"  valign="top"><img src="image/icon_green_phone.png" alt="Phone" border="0" width="22" style="display:block; border:0; outline:none;" /></td>
                                <!-- Edit your Phone number -->
                                <td width=""  valign="top" align="left" style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:24px; font-weight:600; color:#2f3542;"> +27 78 762 7712</td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                        <td width="50%" class="clump">
                          <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                            <tbody>
                              <tr>
                                <td width="25"  valign="top"><img src="image/icon_green_email.png" alt="Email" border="0" width="22" style="display:block; border:0; outline:none;" /></td>
                                <!-- Edit your Email address -->
                                <td width=""  valign="top" align="left" style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:24px; font-weight:600; color:#2f3542;"><a href="mailto:andrewm@wagma-sheq.co.za" style="text-decoration:none; color:#2f3542;">andrewm@wagma-sheq.co.za</a></td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

您似乎还需要在图像上指定高度属性。

例如,代替此:

<img src="image/LOGO-WAGMA 320 X 320.png" alt="Avatar" border="0" width="120" 
style="padding:10px 0 0 10px; display:block; border:0; outline:none;" />

尝试:

<img src="image/LOGO-WAGMA 320 X 320.png" alt="Avatar" border="0" width="120" 
height="120" style="padding:10px 0 0 10px; display:block; border:0; outline:none;" />

如果需要迎合移动设备的响应能力,可以将width和height属性设置为默认值(对于Outlook),将内联样式设置为其他样式:

<img src="image/LOGO-WAGMA 320 X 320.png" alt="Avatar" border="0" width="120" 
height="120" style="width:120px;height:auto;max-width:120px; padding:10px 0 0 10px; display:block; border:0; outline:none;" />