我正在使用 Modular Template Patterns使用 MailChimp 来创建响应式电子邮件，它就像一个魅力。
主要问题:我创建了 3 列布局，每个布局都有一些文本和一个按钮，但由于字体在不同的浏览器和操作系统中呈现略有不同，文本有时最终在一个列中有 2 行和其他 3 个创建“立即购买”按钮的水平错位。
这是在 Gmail 应用程序中创建新问题的解决方案: 我添加了 <br />标记以换行，因此文本始终分布到 3 行，保持按钮对齐，但在 gmail 应用程序中这种布局已损坏。
下面是左边有 br 标签，右边没有 br 标签的截图:
.. 
我尝试过的事情: 我尝试设置 <br />标记为 display: none;在移动设备上，但事实证明 gmail 应用程序没有响应媒体查询。
而不是使用 <br />我用了div标记换行但结果是一样的。
我尝试设置 min-width在 col 的表上设置为 300，它解决了问题，但破坏了桌面电子邮件客户端上的布局。
我相信当文本不插入布局采用最大宽度时，布局不会扩展以覆盖 gmail 应用程序中的整个宽度，因此 3 列开始相互重叠而不是占据全宽，在文本具有被设置为 3 个单词的小块而不是完整的句子。
我的想法已经用完了，你们认为可以解决这个问题的任何方法我都愿意尝试。
未缩小的代码缩小版 click here :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width"><title>Test</title><!--
This email is an experimental proof-of-concept based on the
idea that the most common design patterns seen in email can
be placed in modular blocks and moved around to create
different designs.
The same principle is used to build the email templates in
MailChimp's Drag-and-Drop email editor.
This email is optimized for mobile email clients, and even
works relatively well in the Android Gmail App, which does
not support Media Queries, but does have limited mobile-
friendly functionality.
While this coding method is very flexible, it can be more
brittle than traditionally-coded emails, particularly in
Microsoft Outlook 2007-2010. Outlook-specific conditional
CSS is included to counteract the inconsistencies that
crop up.
For more information on HTML email design and development,
visit http://templates.mailchimp.com
--><style type="text/css">/*////// RESET STYLES //////*/
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
table{border-collapse:collapse;}
img, a img{border:0; outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
p{margin: 1em 0; background-color: #000; color: #fff;}
.divider p {background: #000 !important; color: #000 !important;}
.divider p span{background: #000 !important; color: #000 !important;}
/*////// CLIENT-SPECIFIC STYLES //////*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
/*////// FRAMEWORK STYLES //////*/
.flexibleContainerCell, .footer{padding-top:20px; padding-Right:20px; padding-Left:20px;}
.flexibleImage{height:auto;}
.bottomShim{padding-bottom:20px;}
.imageContent, .imageContentLast{padding-bottom:20px;}
.nestedContainerCell{padding-top:20px; padding-Right:20px; padding-Left:20px;}
/*////// GENERAL STYLES //////*/
body, #bodyTable{background-color:#232323;}
#bodyCell{padding-top:20px; padding-bottom:20px;}
#emailBody{background-color:#000;}
h1, h2, h3, h4, h5, h6{color:#202020; font-family:Helvetica; font-size:20px; line-height:125%; text-align:Left;}
.textContent, .textContentLast, .product-sec{color:#404040; font-family:Helvetica; font-size:16px; line-height:125%; text-align:Left;}
.textContent a, .textContentLast a, .product-sec a{color:#2C9AB7; text-decoration:underline;}
.nestedContainer{background-color:#E5E5E5; border:1px solid #CCCCCC;}
.emailButton{background-color:#2C9AB7; border-collapse:separate; border-radius:4px;}
.buttonContent{color:#FFFFFF; font-family:Helvetica; font-size:18px; font-weight:bold; line-height:100%; padding:15px; text-align:center;}
.buttonContent a{color:#FFFFFF; display:block; text-decoration:none;}
.emailCalendar{background-color:#FFFFFF; border:1px solid #CCCCCC;}
.emailCalendarMonth{background-color:#2C9AB7; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; padding-top:10px; padding-bottom:10px; text-align:center;}
.emailCalendarDay{color:#2C9AB7; font-family:Helvetica, Arial, sans-serif; font-size:60px; font-weight:bold; line-height:100%; padding-top:20px; padding-bottom:20px; text-align:center;}@media only screen and (max-width: 480px){.product-sec{ padding-bottom: 30px !important; border-bottom: 1px solid #888 !important; padding-top: 16px !important;}.product-1-sec > table:first-child .textContent{ border-bottom: 1px solid #888 !important; padding-bottom: 30px !important; }.product-1-sec > table:first-child .textContent .textContent{ border-bottom: 15px solid #000 !important; padding-top: 0px !important; border-top: 1px solid #888 !important; padding-top: 31px !important;} .product-1-sec .logo-wrap tr:first-child .textContent{padding-top: 40px !important;}.mobile-item-top-space{ padding-top: 16px !important; }.footer{ padding-bottom: 10px !important; padding-top: 25px !important; } .inline-br{ content: ''; display: none !important;} .inline-br:after{content: '';} .mobile-has-top-border{border-top: 1px solid #888 !important; padding-top: 31px !important;}.mobile-has-bottom-border{ padding-bottom: 30px !important; border-bottom: 1px solid #888 !important; }/*////// CLIENT-SPECIFIC STYLES //////*/ body{width:100% !important; min-width:100% !important;}/* Force iOS Mail to render the email at full width. */ /*////// FRAMEWORK STYLES //////*/ /* CSS selectors are written in attribute selector format to prevent Yahoo Mail from rendering media query styles on desktop. */ table[id="emailBody"], table[class="flexibleContainer"]{width:100% !important;}/* The following style rule makes any image classed with 'flexibleImage' fluid when the query activates. Make sure you add an inline max-width to those images to prevent them from blowing out. */ img[class="flexibleImage"]{height:auto !important; width:100% !important;}/* Make buttons in the email span the full width of their container, allowing for left- or right-handed ease of use. */ table[class="emailButton"]{width:100% !important;}td[class="buttonContent"]{padding:0 !important;}td[class="buttonContent"] a{padding:15px !important;}td[class="textContentLast"],td[class="product-sec"] td[class="imageContentLast"]{padding-top:20px !important;}/*////// GENERAL STYLES //////*/ td[id="bodyCell"]{padding-top:10px !important; padding-Right:10px !important; padding-Left:10px !important;}.hide-in-mobile{display: none !important;}.show-in-mobile{display: inline-block !important; margin: 0 auto !important;}*[class="show"] {overflow: visible !important;float: none !important;display: block !important;line-height:100% !important;}</style><!--
Outlook Conditional CSS
These two style blocks target Outlook 2007 & 2010 specifically, forcing
columns into a single vertical stack as on mobile clients. This is
primarily done to avoid the 'page break bug' and is optional.
More information here:
http://templates.mailchimp.com/development/css/outlook-conditional-css
--><!--[if mso 12]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]--><!--[if mso 14]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]--></head><body style="margin: 0;padding: 0;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #232323;height: 100% !important;width: 100% !important"><center><table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;background-color: #232323;height: 100% !important;width: 100% !important"><tr><td align="center" valign="top" id="bodyCell" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;padding-top: 20px;padding-bottom: 20px;height: 100% !important;width: 100% !important"><table border="0" cellpadding="0" cellspacing="0" width="600" id="emailBody" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #000"><tr><td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td class="product-1-sec" valign="top" width="600" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><table align="Left" border="0" cellpadding="0" cellspacing="0" width="196" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" class="textContent" style="border: 15px solid #000;text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%;padding-bottom: 20px"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" class="textContent" style="text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%"><div style="color: #fff; text-align: center"><div style="font-size: 14px; line-height: 1em; border-bottom: 5px solid #000; border-top: 15px solid #000">Receive</div><div style="font-size: 26px; line-height: 1em; color: #f5d18d; border-bottom: 17px solid #000">500</div><div style="font-size: 11px; line-height: 1.2em; color: #fff; border-bottom: 18px solid #000">Lorem ipsum dolor<br class="inline-br">sit amet, consectetur<br class="inline-br">adipisicing elit. In</div><div style="font-size: 11px; line-height: 1.2em; color: #fff">veniam id totam, esse<br class="inline-br">laboriosam dolores<br class="inline-br">fugiat, ducimus enim<br><br></div></div></td></tr><tr><td valign="top" style="text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><a href="http://www.google.com/" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2C9AB7;text-decoration: underline"><img style="max-width: 100%;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic" src="http://theprojectstagingserver.com/shazam/img/email/btn-buy-now-small_2x.jpg" width="115" alt="Buy Now"></a></td></tr></table></td><td valign="top" width="2px" class="hide-in-mobile divider" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%; background-color: #000"><img style="max-width: 100%;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;display: block" src="http://theprojectstagingserver.com/shazam/img/email/h-divider.png" width="2px"></td></tr></table><table align="Right" border="0" cellpadding="0" cellspacing="0" width="394" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" class="textContent" style="text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%"><table align="Left" border="0" cellpadding="0" cellspacing="0" width="189" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" class="product-sec" style="border: 15px solid #000;text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%;padding-bottom: 20px"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" class="textContent" style="text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%"><div style="color: #fff; text-align: center"><div style="font-size: 14px; line-height: 1em; border-bottom: 5px solid #000; border-top: 15px solid #000">Receive</div><div style="font-size: 26px; line-height: 1em; color: #f5d18d; border-bottom: 17px solid #000">500</div><div style="font-size: 11px; line-height: 1.2em; color: #fff; border-bottom: 18px solid #000">Lorem ipsum dolor<br class="inline-br">sit amet, consectetur<br class="inline-br">adipisicing elit. In</div><div style="font-size: 11px; line-height: 1.2em; color: #fff">veniam id totam, esse<br class="inline-br">laboriosam dolores<br class="inline-br">fugiat, ducimus enim<br><br></div></div></td></tr><tr><td valign="top" style="text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><a href="http://www.google.com/" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2C9AB7;text-decoration: underline"><img style="max-width: 100%;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic" src="http://theprojectstagingserver.com/shazam/img/email/btn-buy-now-small_2x.jpg" width="115" alt="Buy Now"></a></td></tr></table></td></tr></table><table align="Right" border="0" cellpadding="0" cellspacing="0" width="190" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" width="2px" class="hide-in-mobile" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%; background-color: #000"><img style="max-width: 100%;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic" src="http://theprojectstagingserver.com/shazam/img/email/h-divider.png" width="2px"></td><td valign="top" class="product-sec" style="border: 15px solid #000; text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%;padding-bottom: 20px"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" class="textContent" style="text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%"><div style="color: #fff; text-align: center"><div style="font-size: 14px; line-height: 1em; border-bottom: 5px solid #000; border-top: 15px solid #000">Receive</div><div style="font-size: 26px; line-height: 1em; color: #f5d18d; border-bottom: 17px solid #000">500</div><div style="font-size: 11px; line-height: 1.2em; color: #fff; border-bottom: 18px solid #000">Lorem ipsum dolor<br class="inline-br">sit amet, consectetur<br class="inline-br">adipisicing elit. In</div><div style="font-size: 11px; line-height: 1.2em; color: #fff">veniam id totam, esse<br class="inline-br">laboriosam dolores<br class="inline-br">fugiat, ducimus enim<br><br></div></div></td></tr><tr><td valign="top" style="text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><a href="http://www.google.com/" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2C9AB7;text-decoration: underline"><img style="max-width: 100%;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic" src="http://theprojectstagingserver.com/shazam/img/email/btn-buy-now-small_2x.jpg" width="115" alt="Buy Now"></a></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr><tr><td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td align="center" valign="top" width="600" class="footer" style="padding-top: 20px;text-align: right;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-right: 20px;padding-left: 20px"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tr><td valign="top" class="textContent" style="text-align: right;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #404040;font-family: Helvetica;font-size: 16px;line-height: 125%;padding-bottom: 20px"><a href="http://www.google.com/" style="text-decoration: none;color: #fff;text-align: right;font-size: 9px;line-height: 1em;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">Terms & Conditions apply*</a></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></center></body></html>
最佳答案
而不是使用 <br />标记强制行至少为 3。我使用了多个空格 在句子的末尾以一种跨浏览器和设备保持 3 行的方式。
因此，它解决了 Gmail 应用程序上的问题，并且在其他地方也能正常工作。
编辑:事实证明，修复仅适用于特定宽度，在稍大的设备上，事情开始变得困惑，特别是略小于 600 宽度的横向完全破坏了布局。我最终没有完全使用响应式布局。
关于css - 添加 <br/> 标签中断后 gmail 应用程序中的响应式布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36933591/