Question

我使用MailChimp的Modular Template Patterns来创建响应式电子邮件＆amp;它就像一个魅力。

主要问题：我创建了3个col布局，每个布局都有一些文本和一个按钮，但由于字体在不同的浏览器和操作系统中呈现略有不同，因此文本有时最终会在一个列中有2行而另一个则创造了“立即购买”按钮的水平分散。

这是在Gmail应用程序中创建新问题的解决方案：我添加了<br />标记以打破行，因此文本始终分配到3行，保持按钮对齐但gmail应用程序中的此布局已损坏。 / p>

以下是左侧带有br标签但右侧没有带标签的屏幕截图：

..

我尝试过的事情：我尝试在移动设备上将<br />标记设置为display: none;，但事实证明gmail应用不响应媒体查询。

我没有使用<br />而是使用div标记来打破行，但结果是相同的。

我尝试将col表上的min-width设置为300，它修复了问题，但破坏了桌面电子邮件客户端上的布局。

我相信当文本没有推动布局采取最大宽度时，布局不会扩展到覆盖gmail应用程序中的整个宽度，因此3个col开始相互重叠而不是占据全宽，被设置为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>

Answer 1

而不是使用<br />标记强制行至少为3.我在句子末尾使用了多个空格 ，以便在浏览器和设备之间保持3行

因此，它修复了Gmail App上的问题，并在其他地方也运行良好。

编辑：事实证明，修复仅适用于特定宽度，而在稍大的设备上，事情开始变得凌乱，特别是景观略小于600宽度完全破坏了布局。我最终没有完全使用自适应布局。

添加标签符后，gmail应用中的响应式布局

1 个答案: