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

Question

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

出于某种原因，当我将它添加到 Mac 版本 16.29 的 Outlook 时，它中断了。我将它从我的 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>

Answer 1

您可以尝试两件事。

您的 css 中缺少引号 td[class=wrapper] 应该是 td[class="wrapper"]
我对使用这种 css 选择器有不好的体验，请尝试将其全部更改为正常的 .- 格式，例如 td[class=wrapper] 是 td.wrapper

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

HTML email signature broken in Outlook on Mac - Works fine on Windows?

html

css

macos

outlook

html-email