Outlook CSS渲染与浏览器不同

问题描述 投票：0回答：1

我有一些我正在修改的HTML，并且所有内容都在我的浏览器中按预期呈现。我把徽标留在了这个例子之外。

enter image description here

相同的代码在电子邮件中呈现如下：enter image description here注意第一个div如何不像浏览器那样包围第二个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>
html css outlook office365
1个回答
0
投票

如上所述并且您知道，前端和电子邮件的代码库是不同的。我会从将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>

笔记：

  1. 避免在表格上使用背景颜色。我也看到过其他电子邮件开发人员使用的这种情况，但个人反对表结构的标准化规则。 Table cells（）是添加背景颜色，图像和填充的标记，正如我在代码中所做的那样。
  2. 要获取电子邮件整个正文的灰色背景，请将此颜色声明添加到正文标记中。

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.