Outlook 2007、2010中的2列响应式电子邮件
[英]2 Column Responsive Email in Outlook 2007, 2010
问题描述
I'm trying to keep these images side by side, in both desktop and mobile, and it's not working in Outlook 2007, 2010, etc. There is a large gap between the two columns containing images, and the images expand outside the set width I created. 
我试图将这些图像并排放置在台式机和移动设备上，并且在Outlook 2007、2010等环境中不起作用。包含图像的两列之间有很大的空隙，并且图像超出了设置的宽度我建立。 It works in every other ESP, except older versions of Outlook (of course). 它可以在所有其他ESP中使用，但旧版本的Outlook（当然）除外。 Can you tell me what I'm doing wrong? 你能告诉我我做错了吗？
<!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]-->
2 个解决方案
解决方案1
0 2018-08-22 07:58:33
Media query will not work with outlook. 媒体查询不适用于Outlook。 you should try table structure where your images should be in separate td in a single row having the valign="top" 您应该尝试使用表结构，其中图像应在具有valign =“ top”的单行中位于单独的td中
This will work. 这将起作用。
解决方案2
0 已采纳 2018-08-22 08:00:08
The issue is coming from your css. 问题来自您的CSS。 You've set width to 100% and important, so it's overriding your fixed 600px widths. 您已将宽度设置为100％且很重要，因此它会覆盖固定的600px宽度。 This alongside Outlook not supporting max-width is what's making your tables expand to full width. 这与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;}
Just remove the width: 100% !important and you'll be good to go. 只需删除width: 100% !important ，您会很满意。 Also align-items: center should be removed, as it's part of flexbox and has zero support in emails. 还要align-items: center应该删除align-items: center ，因为它是flexbox的一部分，并且对电子邮件的支持为零。 If you want your tables to be aligned center, then add align="center" as an attribute to the table (or on a td to center align within that). 如果要使表格居中对齐，则将align="center"作为属性添加到表格中（或在td上居中对齐）。
Another minor thing, you might want to change the td widths to a fixed width that matches your image width. 另外一件小事，您可能需要将td宽度更改为与图像宽度匹配的固定宽度。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.