当我将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>
答案 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;" />