一些 web-based 客户的电子邮件中断
Email breaking in some web-based clients
我是电子邮件设计的新手。我有一张图片，一些文字和一个连续的按钮。在移动设备上查看时，图像必须是静态的，按钮需要位于文本下方。所以图像和文本 + 按钮必须并排。我使用过 div 和嵌套 div。它在移动设备上按预期工作。然而，这种布局在某些基于 Web 的邮件客户端（例如 AOL、Yahoo 和 Gmail）上出现了中断。在 comcast 和 outlook web 上运行良好。不确定我做错了什么。请帮忙。
在 comcast 网站上正确呈现。
在基于 Yahoo Web 的邮件上呈现不正确。
这是我使用的代码：
@media screen and (max-width: 480px) {
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* What it does: Forces table cells into 1/3-width rows. */
.stack-column-half,
.stack-column-center-half {
display: inline-block !important;
width: 140px !important;
max-width: 140px !important;
direction: ltr !important;
}
/* What it does: Forces table cells into 2/3-width rows. */
.stack-column-2half,
.stack-column-center-2half {
display: inline-block !important;
width: 190px !important;
max-width: 190px !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
/* What it does: Adjust typography on small screens to improve readability */
.email-container p {
font-size: 17px !important;
}
<tr>
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px 0; background-color: #ffffff;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" style="width: 600px;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 200px; min-width:80px; vertical-align:top; width:100%;" class="stack-column-half">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<img src="https://aishvaryarastogi.worldsecuresystems.com/waze-newsletter-images/Waze_Newsletter_Modules_Desktop_22.png" width="180" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 180px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; border-radius: 10px;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="400" style="width: 400px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px; " class="stack-column-2half mobile-padding1">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 0px 0; text-align: left;" class="center-on-narrow fallback-text mobile-padding1">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding: 0 0px;" class="stack-column" align="left">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 0 20px;" class="mobile-padding1">
<h2 style="margin: 0 0 10px 0; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 18px; color: #333333; font-weight: bold;">John Smith</h2>
<p style="margin: 0 0 10px 0;">Title, title</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding-top:0 0px; " class="stack-column mobile-padding1">
<!-- Button : BEGIN -->
<!--[if mso]>
<v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="https://google.com/" style="height:45px;v-text-anchor:middle;width:150px;" arcsize="50%" stroke="false" fillcolor="#32C2EE">
<w:anchorlock/>
<center style="color:#333333;font-family:'Open Sans', Arial,sans-serif;font-size:15px;">Contact</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="float:none;" align="left">
<tr>
<td class="button-td button-td-primary" style="border-radius: 30px; background: #ffffff;">
<a class="button-a button-a-primary fallback-text" href="https://google.com/" style="background: #32C2EE; border: 0px solid #000000; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: bold; line-height: 15px; text-decoration: none; padding: 18px 55px; color: #333333; display: block; border-radius: 30px;">Contact</a>
</td>
</tr>
</table>
<!-- <![endif]-->
<!-- Button : END -->
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
我玩过你的代码，你似乎缺少 width:100%; 下面一行：
<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px;" class="stack-column-2half mobile-padding1">
添加后，联系人 link 回到与 John Smith 和 Title, title 相同的行。
您可以试试下面的代码，看看它是否适合您。我必须在 table 行周围添加 table 代码才能使渲染工作。
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px 0; background-color: #ffffff;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" style="width: 600px;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 200px; min-width:80px; vertical-align:top; width:100%;" class="stack-column-half">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<img src="https://aishvaryarastogi.worldsecuresystems.com/waze-newsletter-images/Waze_Newsletter_Modules_Desktop_22.png" width="180" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 180px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; border-radius: 10px;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="400" style="width: 400px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px;width:100%;" class="stack-column-2half mobile-padding1">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 0px 0; text-align: left;" class="center-on-narrow fallback-text mobile-padding1">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding: 0 0px;" class="stack-column" align="left">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 0 20px;" class="mobile-padding1">
<h2 style="margin: 0 0 10px 0; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 18px; color: #333333; font-weight: bold;">John Smith</h2>
<p style="margin: 0 0 10px 0;">Title, title</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding-top:0 0px; " class="stack-column mobile-padding1">
<!-- Button : BEGIN -->
<!--[if mso]>
<v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="https://google.com/" style="height:45px;v-text-anchor:middle;width:150px;" arcsize="50%" stroke="false" fillcolor="#32C2EE">
<w:anchorlock/>
<center style="color:#333333;font-family:'Open Sans', Arial,sans-serif;font-size:15px;">Contact</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="float:none;" align="left">
<tr>
<td class="button-td button-td-primary" style="border-radius: 30px; background: #ffffff;">
<a class="button-a button-a-primary fallback-text" href="https://google.com/" style="background: #32C2EE; border: 0px solid #000000; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: bold; line-height: 15px; text-decoration: none; padding: 18px 55px; color: #333333; display: block; border-radius: 30px;">Contact</a>
</td>
</tr>
</table>
<!-- <![endif]-->
<!-- Button : END -->
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
</tbody>
</table>
我是电子邮件设计的新手。我有一张图片，一些文字和一个连续的按钮。在移动设备上查看时，图像必须是静态的，按钮需要位于文本下方。所以图像和文本 + 按钮必须并排。我使用过 div 和嵌套 div。它在移动设备上按预期工作。然而，这种布局在某些基于 Web 的邮件客户端（例如 AOL、Yahoo 和 Gmail）上出现了中断。在 comcast 和 outlook web 上运行良好。不确定我做错了什么。请帮忙。
在 comcast 网站上正确呈现。
在基于 Yahoo Web 的邮件上呈现不正确。
这是我使用的代码：
@media screen and (max-width: 480px) {
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* What it does: Forces table cells into 1/3-width rows. */
.stack-column-half,
.stack-column-center-half {
display: inline-block !important;
width: 140px !important;
max-width: 140px !important;
direction: ltr !important;
}
/* What it does: Forces table cells into 2/3-width rows. */
.stack-column-2half,
.stack-column-center-2half {
display: inline-block !important;
width: 190px !important;
max-width: 190px !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
/* What it does: Adjust typography on small screens to improve readability */
.email-container p {
font-size: 17px !important;
}
<tr>
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px 0; background-color: #ffffff;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" style="width: 600px;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 200px; min-width:80px; vertical-align:top; width:100%;" class="stack-column-half">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<img src="https://aishvaryarastogi.worldsecuresystems.com/waze-newsletter-images/Waze_Newsletter_Modules_Desktop_22.png" width="180" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 180px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; border-radius: 10px;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="400" style="width: 400px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px; " class="stack-column-2half mobile-padding1">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 0px 0; text-align: left;" class="center-on-narrow fallback-text mobile-padding1">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding: 0 0px;" class="stack-column" align="left">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 0 20px;" class="mobile-padding1">
<h2 style="margin: 0 0 10px 0; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 18px; color: #333333; font-weight: bold;">John Smith</h2>
<p style="margin: 0 0 10px 0;">Title, title</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding-top:0 0px; " class="stack-column mobile-padding1">
<!-- Button : BEGIN -->
<!--[if mso]>
<v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="https://google.com/" style="height:45px;v-text-anchor:middle;width:150px;" arcsize="50%" stroke="false" fillcolor="#32C2EE">
<w:anchorlock/>
<center style="color:#333333;font-family:'Open Sans', Arial,sans-serif;font-size:15px;">Contact</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="float:none;" align="left">
<tr>
<td class="button-td button-td-primary" style="border-radius: 30px; background: #ffffff;">
<a class="button-a button-a-primary fallback-text" href="https://google.com/" style="background: #32C2EE; border: 0px solid #000000; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: bold; line-height: 15px; text-decoration: none; padding: 18px 55px; color: #333333; display: block; border-radius: 30px;">Contact</a>
</td>
</tr>
</table>
<!-- <![endif]-->
<!-- Button : END -->
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
我玩过你的代码，你似乎缺少 width:100%; 下面一行：
<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px;" class="stack-column-2half mobile-padding1">
添加后，联系人 link 回到与 John Smith 和 Title, title 相同的行。
您可以试试下面的代码，看看它是否适合您。我必须在 table 行周围添加 table 代码才能使渲染工作。
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px 0; background-color: #ffffff;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" style="width: 600px;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 200px; min-width:80px; vertical-align:top; width:100%;" class="stack-column-half">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<img src="https://aishvaryarastogi.worldsecuresystems.com/waze-newsletter-images/Waze_Newsletter_Modules_Desktop_22.png" width="180" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 180px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; border-radius: 10px;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="400" style="width: 400px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px;width:100%;" class="stack-column-2half mobile-padding1">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 0px 0; text-align: left;" class="center-on-narrow fallback-text mobile-padding1">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding: 0 0px;" class="stack-column" align="left">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 0 20px;" class="mobile-padding1">
<h2 style="margin: 0 0 10px 0; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 18px; color: #333333; font-weight: bold;">John Smith</h2>
<p style="margin: 0 0 10px 0;">Title, title</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding-top:0 0px; " class="stack-column mobile-padding1">
<!-- Button : BEGIN -->
<!--[if mso]>
<v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="https://google.com/" style="height:45px;v-text-anchor:middle;width:150px;" arcsize="50%" stroke="false" fillcolor="#32C2EE">
<w:anchorlock/>
<center style="color:#333333;font-family:'Open Sans', Arial,sans-serif;font-size:15px;">Contact</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="float:none;" align="left">
<tr>
<td class="button-td button-td-primary" style="border-radius: 30px; background: #ffffff;">
<a class="button-a button-a-primary fallback-text" href="https://google.com/" style="background: #32C2EE; border: 0px solid #000000; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: bold; line-height: 15px; text-decoration: none; padding: 18px 55px; color: #333333; display: block; border-radius: 30px;">Contact</a>
</td>
</tr>
</table>
<!-- <![endif]-->
<!-- Button : END -->
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
</tbody>
</table>