我正在发送 HTML 电子邮件，但无论我做什么，无论为 table、tr、td、div 和 body 添加宽度，电子邮件内容都会占据整个宽度。所有 Windows 7、8 和 10 上的 Outlook 2016 都会发生这种情况。有没有办法可以修复 Outlook 2016 上电子邮件的宽度？
在每个电子邮件模板上，您必须设置一个带有
width="100%"style="margin:0 auto"style="width:600px;"这里有一个示例代码和一个小提琴。
<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>
由于固定宽度表格破坏了响应式 CSS，因此使用条件 CSS 是解决这个古老问题的可行解决方法：https://stackoverflow.design/email/base/mso/