Question

我发送HTML电子邮件，但无论我做什么，无论为表格，tr，td，div和body添加宽度，电子邮件内容无论如何都会占用全部宽度。在所有Windows 7,8和10上的Outlook 2016上都会发生这种情况。有没有办法在Outlook 2016上修复电子邮件的宽度？

Answer 1

在每个电子邮件模板上，您必须设置一个包含width="100%"和style="margin:0 auto"的表格，然后设置一个带有style="witdh:600px;"的td（这是电子邮件的最常用/常用宽度），然后你可以把你的内容。

此处为示例代码和fiddle。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->  

    <title>Sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        html, body {
            font-family: 'Arial', sans-serif; 
        }
    </style>

</head>
<body bgcolor="#fff" style="margin:0px; padding:0px; -webkit-text-size-adjust:none;"><!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width"><!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width">
<table bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" height="100%" style="margin:0 auto;" width="100%">
    <tbody>
        <tr>
            <td align="center" bgcolor="#fafafa" height="100%" width="600">
            <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td bgcolor="white" height="50" style="height:50px;" width="600">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td align="center" height="50" style="height:50px;" valign="middle" width="600"><span style="font-size:12px;"><span style="font-family:Arial,Helvetica,sans-serif;"><a href="#" style="color:#000;">Some inline version</a></span></span></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#FAB800" height="69" style="height:69px;" width="600">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td align="center" height="69" style="height:69px;" valign="middle" width="600"><img alt="" height="69" src="http://via.placeholder.com/600x69" style="display: block;" width="600" /></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#fff" height="165" style="height:165px;" width="600">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td align="center" height="165" style="height:165px;" valign="middle" width="600">
                                        <p style="width:90%; font-weight:bold; color:#9f836f; font-size:35px; line-height:1.15; font-family: 'Arial', sans-serif; ">Lorem<br>
                                        <span style="color:#232323; font-size:22px; line-height:1.5; font-family: 'Arial', sans-serif; font-weight:normal;">Ipsum</span></p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#fff" height="413" style="height:413px;" width="600">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td align="center" height="413" style="height:413px;" valign="middle" width="600">
                                        <img alt="" height="413" src="http://via.placeholder.com/600x413" style="display: block;" width="600" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

有没有办法在Outlook 2016上修复HTML电子邮件宽度？

1 个答案: