Question

我正在使用Mailchimp及其模板进行电子邮件营销。我添加了特定于Outlook的CSS代码，但它仍未在Outlook中正确显示。有什么建议？以下是标题的一部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org      /TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>*|MC:SUBJECT|*</title>
    <style type="text/css">
        /* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
        /** Outlook 07, 10 Padding issue: These "newer" versions of     Outlook add some padding around table cells potentially throwing off your perfectly pixeled table.  The issue can cause added space and also throw off borders completely.  Use this fix in your header or inline to safely fix your table woes.

More info: http://www.ianhoar.com/2008/04/29/outlook-2007-borders-and-1px-padding-on-table-cells/
http://www.campaignmonitor.com/blog/post/3392/1px-borders-padding-on-table-cells-in-outlook-07/

H/T @edmelly

Bring inline: No.
**/
table td {border-collapse: collapse !important}

        #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button      */
        .ReadMsgBody{width:600px;} .ExternalClass{width:600px;} /* Force Hotmail to display emails at full width */
        .yshortcuts, a .yshortcuts, a .yshortcuts:hover, a .yshortcuts:active, a .yshortcuts:focus{background-color:transparent !important; border:none !important; color:inherit !important;} /* Prevent Yahoo! from styling links */

        /* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
        body{margin:0; padding:0;}
        img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
        table, td{border-collapse:collapse !important; mso-table-lspace:0pt; mso-table-rspace:0pt;}
        #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
        #bodyCell{padding:10px;}
        .templateContainer{width:600px;}

Answer 1

抱歉，但是电子邮件中没有正确显示的内容是什么？尝试查看其他模板，例如http://zurb.com/playground/responsive-email-templates。他们应该让你更好地了解可靠的结构和css。您需要内联您的css，它是电子邮件简报的标准 - 这是您获得一致外观的唯一方式，尤其是在gmail中！

Answer 2

您可以将模板简化为更方便的模板，但继续我的2c：

我建议您使用石蕊等工具，这样您就可以在任何电子邮件应用/浏览器/设备组合中测试营销电子邮件的呈现。

mailchimp模板不会显示在outlook中

2 个答案: