Question

我有一些正在修改的html，所有内容都按预期在浏览器中呈现。我将徽标排除在此示例之外。

相同的代码正在电子邮件中呈现，如下所示：请注意，第一个div不会像在浏览器中那样环绕第二个。有关如何解决此问题的任何想法？

谢谢！

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

    <head>
        <title>
            Message
        </title>
        <!--[if !mso]><!-- -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--<![endif]-->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
        #outlook a {
            padding: 0;
            text-decoration: none !important;
            color: #4da9ff;
            }
            a{
            text-decoration: none !important;
            color: #4da9ff;
            }

            .ReadMsgBody {
            width: 100%;
            }

            .ExternalClass {
            width: 100%;
            }

            .ExternalClass * {
            line-height: 100%;
            }

            body {
            margin: 0;
            padding: 0;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            }

            table,
            td {
            border-collapse: collapse;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
            }

            img {
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
            -ms-interpolation-mode: bicubic;
            }

            p {
            display: block;
            margin: 13px 0;
            }
        </style>
        <!--[if !mso]><!-->
        <style type="text/css">
            @media only screen and (max-width:480px) {
            @-ms-viewport {
            width: 320px;
            }
            @viewport {
            width: 320px;
            }
            }
        </style>
        <!--<![endif]-->
        <!--[if mso]>
            <xml>
            <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
            </xml>
        <![endif]-->
        <!--[if lte mso 11]>
            <style type="text/css">
            .outlook-group-fix { width:100% !important; }
            </style>
        <![endif]-->


        <style type="text/css">
            @media only screen and (min-width:480px) {
            .mj-column-per-100 {
            width: 100% !important;
            }
            }
        </style>


        <style type="text/css">
        </style>
        <style type="text/css">
            div {
            margin: 0 auto;
            }

            td {
            padding: 0;
            }

            p {
            padding: 0;
            margin: 0;
            }
        </style>
    </head> 
<body>
<div style="background-color: #f9f9fb;width: 100%; height: 100%; font-family: Helvetica, 'Trebuchet MS', Verdana, Geneva, Century Gothic, Arial, sans-serif;">
<table style="background-color: #0695e4; width: 100%; height: 80px; vertical-align: middle;">
<tbody>
<tr>
<td style="width: 70%;">
<h2 style="margin: 0 10px; color: white">Message From a Friend</h2>
</td>
<td style="width: 30%; text-align: center;"><img style="margin: 0 10px; width: auto; max-height:100%;" src="empty" alt="Logo" /></td>
</tr>
</tbody>
</table>
<h3 style="text-align: center;">Please take action below</h3>
<div style="margin: 20px; background-color: white; padding: 20px;">
<p style="word-break: break-all;">Dear friend,</p>
<br />
<p style="word-break: break-all;"><a href="somelink">Click here</a></p>
</div>
</div>
</body>
</html>

Answer 1

如上所述，您知道，前端和电子邮件的代码库是不同的。我将从将div转换为表开始。人们确实使用了它们，但是在不了解其怪癖的情况下，最好退回到基本表结构，因为它是最安全的HTML电子邮件编码技术。

以下是对您的代码的一些修改：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

    <head>
        <title>
            Message
        </title>
        <!--[if !mso]><!-- -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--<![endif]-->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
        #outlook a {
            padding: 0;
            text-decoration: none !important;
            color: #4da9ff;
            }
            a{
            text-decoration: none !important;
            color: #4da9ff;
            }

            .ReadMsgBody {
            width: 100%;
            }

            .ExternalClass {
            width: 100%;
            }

            .ExternalClass * {
            line-height: 100%;
            }

            body {
            margin: 0;
            padding: 0;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            }

            table,
            td {
            border-collapse: collapse;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
            }

            img {
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
            -ms-interpolation-mode: bicubic;
            }

            p {
            display: block;
            margin: 13px 0;
            }
        </style>
        <!--[if !mso]><!-->
        <style type="text/css">
            @media only screen and (max-width:480px) {
            @-ms-viewport {
            width: 320px;
            }
            @viewport {
            width: 320px;
            }
            }
        </style>
        <!--<![endif]-->
        <!--[if mso]>
            <xml>
            <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
            </xml>
        <![endif]-->
        <!--[if lte mso 11]>
            <style type="text/css">
            .outlook-group-fix { width:100% !important; }
            </style>
        <![endif]-->


        <style type="text/css">
            @media only screen and (min-width:480px) {
            .mj-column-per-100 {
            width: 100% !important;
            }
            }
        </style>


        <style type="text/css">
        </style>
        <style type="text/css">
            div {
            margin: 0 auto;
            }

            td {
            padding: 0;
            }

            p {
            padding: 0;
            margin: 0;
            }
        </style>
    </head> 
<body style="background-color:#f9f9fb">
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; font-family: Helvetica, 'Trebuchet MS', Verdana, Geneva, Century Gothic, Arial, sans-serif;">
    <tbody>
        <tr>
            <td>
                <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
                    <tbody>
                        <tr>
                            <td style="background-color: #0695e4; height:80px;">
                                <table cellpadding="0" cellspacing="0" border="0" style="width: 100%; vertical-align: middle;">
                                    <tbody>
                                        <tr>
                                            <td style="width: 70%;">
                                            <h2 style="margin: 0 10px; color: white">Message From a Friend</h2>
                                            </td>
                                            <td style="width: 30%; text-align: center;"><img style="margin: 0 10px; width: auto; max-height:100%;" src="empty" alt="Logo" /></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <h3 style="text-align: center;">Please take action below</h3>
                
                <table cellpadding="0" cellspacing="0" border="0" style="width: 100%; vertical-align: middle;">
                    <tbody>
                        <tr>
                            <td style="margin: 20px; background-color:#ffffff; padding: 20px;">
                                <p style="word-break: break-all;">Dear friend,</p>
                                <br />
                                <p style="word-break: break-all;"><a href="somelink">Click here</a></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

注意：

避免在表格上使用背景色。我也曾见过其他电子邮件开发人员使用过此功能，但个人认为这违反了表结构的标准化规则。表格单元格（）是添加背景颜色，图像和填充的标签，就像我在代码中所做的一样。
要在电子邮件的整个正文中获得灰色背景，请将此颜色声明添加到正文标签中。

让我们知道它是如何工作的！

Outlook CSS渲染与浏览器不同

1 个答案: