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

Question

我试图在桌面和移动设备中并排放置这些图像，但它在 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]-->

Answer 1

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

的单行中单独的 td

这会起作用。

Answer 2

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

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 的一部分并且在电子邮件中的支持为零。如果您希望 table 居中对齐，请将 align="center" 作为属性添加到 table 中（或在 td 上居中对齐）。

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

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

2 Column Responsive Email in Outlook 2007, 2010

html

css

html-email

outlook-2010

outlook-2007