我已经创建了一个电子邮件签名，并且经过测试可以在以下设备上完美运行: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
关于在 Mac 上的 Outlook 中损坏的 HTML 电子邮件签名 - 在 Windows 上工作正常吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58245616/