某些基於 Web 的客戶端中的電子郵件中斷

Question

我是電子郵件設計的新手。 我有一個圖像，一些文本和一個按鈕。 在移動設備上查看時，圖像必須是靜態的，按鈕必須位於文本下方。 所以 Image 和 text + 按鈕必須並排。 我使用過 div 和嵌套 div。 它在移動設備上按預期工作。 但是，這種布局在一些基於 Web 的郵件客戶端（例如 AOL、Yahoo 和 Gmail）上遭到破壞。 在 comcast 和 Outlook Web 上運行良好。 不知道我做錯了什么。 請幫忙。

在康卡斯特網站上正確呈現。

在基於 Yahoo 網絡的郵件上錯誤呈現。

這是我使用的代碼：

 @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 -->

Answer 1

我玩了你的代碼，看來你缺少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">

添加后，聯系鏈接返回到與John Smith和Title, title相同的行。

你可以試試下面的代碼，看看它是否適合你。 我必須在表格行周圍添加表格代碼才能使渲染工作。

 <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>