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。您应该尝试使用表结构，其中图像应在单独的td中位于具有valign =“ top”

的一行中

这将起作用。

Answer 2

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

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的宽度更改为与图像宽度匹配的固定宽度。

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

2 个答案: