Question

我正在努力解决Outlook 365客户端中的问题，希望您能帮助我。

我有一个非常简单的表格设置，顶部有一些空格，365认为它应该在顶部和底部插入白线： https://www.screencast.com/t/mWFj57wIGx

以下是完整的代码示例：

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

    <title>Email Framework Version 1.0.1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no">
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->

    <style type="text/css">
        .ReadMsgBody {
            width: 100%;
            background-color: #F6F6F6;
        }
        
        .ExternalClass {
            width: 100%;
            background-color: #F6F6F6;
        }
        
        body {
            width: 100%;
            background-color: #f6f6f6;
            margin: 0;
            -webkit-font-smoothing: antialiased;
            font-family: Arial, Times, serif
        }
        
        h1,
        h2,
        h3,
        p,
        td {
            line-height: normal !important;
        }
        
        table {
            border-collapse: collapse !important;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }
        
        @media only screen and (max-width: 639px) {
            .wrapper {
                width: 100%;
                padding: 0 !important;
            }
        }
        
        @media only screen and (max-width: 480px) {
            .centerClass {
                margin: 0 auto !important;
            }
            .imgClass {
                width: 100% !important;
                height: auto;
            }
            .wrapper {
                width: 320px !important;
                padding: 0 !important;
            }
            .header {
                width: 320px !important;
                padding: 0 !important;
                background-image: url(http://dummyimage.com/320x400/fff/fff) !important;
            }
            .container {
                width: 300px !important;
                padding: 0 !important;
            }
            .mobile {
                width: 300px !important;
                display: block !important;
                padding: 0 !important;
                text-align: center !important;
            }
            .mobile25 {
                width: 150px !important;
                padding: 0 !important;
                text-align: center;
                display: inline-table;
            }
            .mobile50 {
                width: 300px !important;
                padding: 0 !important;
                text-align: center;
            }
            .mobileOff {
                width: 0px !important;
                display: none !important;
            }
        }

    </style>

</head>

<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" style="background-color:#F6F6F6; font-family:Arial,serif; margin:0; padding:0; min-width: 100%; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;">

    <!-- Start Background -->
    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#F6F6F6">
        <tr>
            <td width="100%" valign="top" align="center">

                <!-- Start TEST -->
                <table width="760" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#111111">
                    <tr>
                        <td height="20" style="font-size:20px; line-height:20px;"> </td>
                        <!-- Spacer -->
                    </tr>
                    <tr>
                        <td align="center">

                            <!-- Start Container -->
                            <table width="720" cellpadding="0" cellspacing="0" border="0" class="container">
                                <tr>
                                    <td width="360" class="mobile" style="font-family:arial; font-size:12px; color:#fff; line-height:18px; margin:0;" align="center">
                                        Menu 1
                                    </td>
                                    <td width="360" class="mobile" style="font-family:arial; font-size:12px; color:#fff; line-height:18px; margin:0;" align="center">
                                        Menu 2
                                    </td>
                                </tr>
                            </table>
                            <!-- End Container -->

                        </td>
                    </tr>
                    <tr>
                        <td height="20" style="font-size:20px; line-height:20px;"> </td>
                        <!-- Spacer -->
                    </tr>
                </table>
                <!-- End TEST -->

                <!-- Start Content -->
                <table width="760" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#ffffff">
                    <tr>
                        <td height="10" style="font-size:10px; line-height:10px;"> </td>
                        <!-- Spacer -->
                    </tr>
                    <tr>
                        <td align="center">

                            <!-- Start Container -->
                            <table width="720" cellpadding="0" cellspacing="0" border="0" class="container">
                                <tr>
                                    <td width="720" class="mobile" style="font-family:arial; font-size:12px; line-height:18px; margin:0;">
                                        {content}
                                    </td>
                                </tr>
                            </table>
                            <!-- End Container -->

                        </td>
                    </tr>
                    <tr>
                        <td height="10" style="font-size:10px; line-height:10px;"> </td>
                        <!-- Spacer -->
                    </tr>
                </table>
                <!-- End Content -->

            </td>
        </tr>
    </table>
    <!-- End Background -->

</body>

</html>

＆＃13;

有谁知道我可以做些什么来消除这些白线？

Answer 1

我有个坏消息，目前的想法是没有办法解决Outlook的这个问题。

Outlook 2007/2010/2013/2016 Windows 10 Mail以及每个Office客户端（我无法在365中测试）都会在电子邮件正文中添加空间。它将在电子邮件的顶部和底部添加15px空间，在左侧和右侧添加10px间距。

这是HTML电子邮件的缺点。由于没有标准，每个电子邮件客户端都有他们支持的不同标准或他们添加的怪癖。

请不要将我的帖子视为沮丧，因为我们其他人根本没有找到解决方案。也许你会发现这个问题的解决方案。在大多数客户中，没有差距。

祝你好运。

另外，感谢您发布您的代码段。它允许人们轻松测试您的代码，看看我们是否可以找到一些解决方案（如果有的话）。

Outlook 365白色空白

1 个答案: