HTML电子邮件签名在Mac上的Outlook中损坏 - 在Windows上工作正常? - HTML email signature broken in Outlook on Mac

我创建了一个电子邮件签名，并对其进行了测试，可以在以下方面完美运行：Outlook for Windows 2019，Outlook for iOS，Gmail webapp，Outlook webapp。

由于某种原因，当我将其添加到 Outlook for Mac 版本 16.29 时，它中断了。我把它从我的Mac发送到我的iPhone，它根本没有响应。

任何想法为什么它只像这样从 mac 并在其他任何地方工作？我该如何解决它。

我有所有的媒体查询来使其响应。我已经在表格中编码，所以它在 Outlook 中看起来应该很好。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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="540" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td style="background;">
<table width="540" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td valign="top" align="left" class="clump">
<img src="https://i.imgur.com/v1NoHym.jpg" alt="Avatar" border="0" height="200" width="200" style="display:block; outline:none; border:0;" />
</td>
<td valign="top" align="left" class="clump" style="padding:0 0 0 0;">
<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:15px 0 0 20px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-family:'Raleway', sans-serif, Arial; font-size:22px; line-height:30px; font-weight:800; color:#2f3542;">First Name</td>
</tr>
<tr>
<td style="font-family:'Raleway', sans-serif, Arial; font-size:15px; line-height:22px; font-weight:500; color:#989faf;">Position</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:20px 0 0 15px;">
<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="40%" 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="28" height="30" valign="top"><img src="https://i.imgur.com/qdSJcZJ.png" alt="Web" border="0" height="22" width="22" style="display:block; border:0; outline:none;" /></td>
          <td align="left" width="" height="30" valign="top"  style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:24px; font-weight:600; color:#2f3542;"><a href="tel:0800 246 1809" style="text-decoration:none; color:#2f3542;">0000 0000 000</a></td>
      </tr>
  </tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding:5px 0 0 15px;">
<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="60%" 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="28" height="30" valign="top"><img src="https://i.imgur.com/mDkpstX.png" alt="Email" border="0" height="22" width="22" style="display:block; border:0; outline:none;" /></td>
      <td width="" height="30" 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:info@example.com" style="text-decoration:none; color:#2f3542;">info@example.com</a></td>
  </tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding:5px 0 9px 15px;">
<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="40%" 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="28" height="30" valign="top"><img src="https://i.imgur.com/qdSJcZJ.png" alt="Web" border="0" height="22" width="22" style="display:block; border:0; outline:none;" /></td>
      <td width="" height="30" valign="top" align="left" style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:24px; font-weight:600; color:#2f3542;"><a href="https://example.com/" style="text-decoration:none; color:#2f3542;">example.com</a></td>
  </tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="" align="left" style="background; padding:0 0 0 40px;">
<a href="#"><img src="https://i.imgur.com/e1Ykoqm.png" alt="Facebook" height="35" width="35" border="0" style="padding:0 0 3px 0; display:block; border:0; outline:none;" /></a>
<a href="#"><img src="https://i.imgur.com/vSFaFlh.png" alt="Twitter" height="35" width="35" border="0" style="padding:0 0 3px 0; display:block; border:0; outline:none;" /></a>
<a href="#"><img src="https://i.imgur.com/SAtoqFt.png" alt="Instagram" height="35" width="35" border="0" style="padding:0 0 3px 0; display:block; border:0; outline:none;" /></a>
<a href="#"><img src="https://i.imgur.com/L9Z3ciV.png" alt="LinkedIN" height="35" width="35" border="0" style="padding:0 0 3px 0; display:block; border:0; outline:none;" /></a>
<a href="#"><img src="https://i.imgur.com/jE3sFh0.png" alt="YouTube" height="35" width="35" border="0" style="padding:0 0 3px 0; display:block; border:0; outline:none;" /></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table width="540" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td style="background;">
<table width="540" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td valign="top" align="left" class="clump" style="padding:20px 0 0 20px;">
<img src="https://i.imgur.com/tGGrM3B.jpg" alt="Avatar" border="0" height="120" width="120" style="display:block; outline:none; border:0;" />
</td>
<td valign="top" align="left" class="clump" style="padding:0 0 0 0;">
<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:15px 0 0 20px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-family:'Raleway', sans-serif, Arial; font-size:11px; line-height:22px; font-weight:500; color:#989faf;">This message and any attachments are confidential and intended for the named addressee(s) only. If you have received this message in error, please notify the sender then delete the message. Any unauthorized modification, use or dissemination is prohibited. The sender shall not be liable for this message if it has been modified, altered, falsified, infected by a virus or even edited or disseminated without authorization. </td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>

你可以尝试两件事。

您在 css 中缺少引号td[class=wrapper]应该td[class="wrapper"]
我在使用这种 css 选择器时体验不佳，请尝试将所有格式更改为正常的 .-格式，就像td[class=wrapper]td.wrapper

HTML电子邮件签名在Mac上的Outlook中损坏 - 在Windows上工作正常?

相关内容

最新更新

热门标签：