Outlook 2007、2010 中的 2 列响应式电子邮件答案

【问题标题】：2 Column Responsive Email in Outlook 2007, 2010Outlook 2007、2010 中的 2 列响应式电子邮件
【发布时间】：2019-01-28 02:33:48
【问题描述】：

我试图在桌面和移动设备中并排保存这些图像，但它在 Outlook 2007、2010 等中不起作用。包含图像的两列之间存在很大差距，并且图像向外扩展我创建的设定宽度。它适用于所有其他 ESP，但旧版本的 Outlook 除外（当然）。你能告诉我我做错了什么吗？

<!DOCTYPE html>
<html>
<head>
<title>Email</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode: bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */


img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
table{border-collapse: collapse !important; width: 100% !important; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; align-items: center;}
td {border-collapse: collapse !important;}
body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}


a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}


@media screen and (max-width: 525px) {

.header-img1 {
max-width: 425px !important;
width: 100% !important;
height: auto !important;
}

.header-img2 {
max-width: 175px !important;
width: 100% !important;
height: auto !important;
}

.header-td {
max-width: 425px !important;
width: auto !important;
height: auto !important;
padding: 0px !important;
margin: 0px !important;
}

}
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="left" valign="bottom" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 600px;">
<tr>
<td align="left" valign="bottom">
<table cellpadding="0" cellspacing="0" border="0" width="600" style="max-width: 600px; width: 600px;">
<tr>
<td align="left" valign="bottom" width="70%" style="max-width: 425px;" class="header-td">
<a href="#" target="_blank">
<img src="" style="display: block; width: 425px;" alt="" class="header-img1"></a>
</td>
<td align="left" valign="bottom" width="30%" style="max-width: 175px;" class="header-td">
<a href="#" target="_blank">
<img src="" alt="" style="display: block; width: 175px;" class="header-img2"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>    
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->

【问题讨论】：

不确定您是否粘贴了部分代码，但我的代码有很多问题。有些是：缺少样式结尾，没有正文，没有 html 关闭。在图像中定义最大宽度（图像宽度），高度自动和最大宽度为 100%。您也可以在代码中少一张表。

标签： html css html-email outlook-2010 outlook-2007

【解决方案1】：

问题来自您的 CSS。您已将宽度设置为 100% 并且很重要，因此它会覆盖您固定的 600 像素宽度。这与不支持 max-width 的 Outlook 一起使您的表格扩展到全宽。

table{border-collapse: collapse !important; width: 100% !important; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; align-items: center;}

只需删除 width: 100% !important 即可。 align-items: center 也应该被删除，因为它是 flexbox 的一部分并且在电子邮件中的支持为零。如果您希望表格居中对齐，请将align="center" 作为属性添加到表格（或在td 上以在其中居中对齐）。

另一件小事，您可能希望将td 宽度更改为与您的图像宽度相匹配的固定宽度。

【讨论】：

【解决方案2】：

媒体查询不适用于 Outlook。您应该尝试表格结构，其中您的图像应该在具有 valign="top"

的单行中的单独 td 中

这会起作用。

【讨论】：