Question

我正在HTML为多个电子邮件客户端设计电子邮件简报。到目前为止，除了Outlook ...

之外，它适用于每个客户端

字体变得如此之大以至于表格等都会破坏。我已经在任何地方都给了CSS内联，并为Outlook添加了一些CSS技巧。我没有解决这个问题。这是代码;

<!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" />
        <meta name="format-detection" content="telephone=yes">
        <meta name="viewport" content="width=600,initial-scale = 2.3,user-scalable=no">
        <title>Untitled Document</title>
        <style type="text/css">
            /* Client-specific Styles */
            #outlook a{padding:0;}

            body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;}

            body{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}

            p {
                margin: 1em 0;
            }

            h1, h2, h3, h4, h5, h6 {
                color: black !important;
                line-height: 100% !important;
            }

            h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
                color: blue !important;
            }

            h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {
                color: red !important;
            }

            h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
                color: purple !important;
            }

            table td {
                border-collapse:collapse;
            }
            .yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;}

            .ExternalClass {
                width:                        100%;
            }
            .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
                line-height:                 100%;
            }
            .ExternalClass{display:inline-block; line-height: 131%};
            .ExternalClass {width: 100%;}
            .ReadMsgBody{width: 100%;}
            table td {
                border-collapse:            collapse;
            }
            body {
                margin:                         0;
                padding:                        0;
                width:                       100%;
                overflow-y:                hidden;
                background-color:         #000000;
                -webkit-text-size-adjust:    100%;
                -ms-text-size-adjust:        100%;
                font-family:            Helvetica;
                vertical-align:               top;
                border-spacing:               0px;
                color:                    #ffffff;
            }
            p {
                margin-bottom:               10px;
                margin-left:                 35px;
                margin-right:                35px;
            }
            .container {
                width:                      600px;
                background-color:            #000;
                margin:                    0 auto;
            }
            a:link {
                color:                    #ffffff;
                text-decoration:        underline;
            }
            a:visited {
                color:                    #6E6C64;
                text-decoration:        underline;
            }
            a:hover, a:active, a:focus {
                text-decoration:             none;
            }
        </style>
    </head>

    <body margin="0" padding="0" width="100%" style="overflow-y:hidden; background-color:#000000; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;  font-family:Helvetica; vertical-align:top; border-spacing:0px; font-size:1em;">
        <table class="container" width="600px" background-color="#000000" margin="0 auto" cellpadding="0" cellspacing="0">
            <tr width="600px">
                <td style="line-height:10px;" width="600px"><img src="http://mediabunker.com/email/header.png" align="absbottom"></td>
            </tr>
            <tr bgcolor="#f8f8f8" width="600px">
                <td style="font-family:Helvetica; font-size:1em;" width="600px">
                    <h1 align="center" style="color:#000000;">Need apps? We build ‘em.</h1>

                    <p style="margin-bottom:10px; color:#575757; margin-left:35px; margin-right:35px; font-size:1em;">Het gebruik van applicaties, oftewel apps, is namelijk booming! Steeds meer merken en bedrijven zien het gemak van een app in. Het is de ideale optie voor het versterken van uw merk, zowel extern als intern, of het opzetten van een geheel nieuw product. Ook de enorme groei in gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven.</p>

                    <p style="margin-bottom:10px; color:#575757; margin-left:35px; margin-right:35px; font-size:1em;">Mocht u geïnteresseerd zijn in onze service, van op maat gemaakte applicaties en backend oplossingen, neem dan gerust contact met ons op. U bent van harte welkom voor een kop koffie bij ons in de Suikersilo's, tijdens een verkennend gesprek of een demonstratie van de mogelijkheden van apps voor mobiel, tablets, tv en het web.</p>

                    <p style="margin-bottom:10px; color:#575757; margin-left:35px; margin-right:35px; margin-bottom:60px; font-size:1em;">Alvast bedankt en hopelijk tot ziens.</p>
                </td>
            </tr>
            <tr width="600px">
                <td><img src="http://mediabunker.com/email/title.png" align="absbottom"></td>
            </tr>
            <tr bgcolor="#232323" width="600px">
                <td style="font-family:Helvetica; font-size:1em;">
                    <table height="auto" border="0" cellpadding="5px" margin-top="0" align="center" style="color:#fff;">
                        <tr align="center">
                        <td align="center"><img src="http://mediabunker.com/email/apple.png"/></td>
                        <td align="center"><img src="http://mediabunker.com/email/android.png"  /></td>
                        </tr>
                      <tr>
                        <td align="center" style="font-family:Helvetica; font-size:1em;">Apple iOS de kracht achter<br />
                          de iPhone, iPod en iPad.</td>
                        <td align="center" style="font-family:Helvetica; font-size:1em;">Android is met Google, HTC en<br />
                                            Samsung, het meest gebruikte<br />
                                            mobiele besturingssysteem.</td>
                        </tr>
                      <tr>
                        <td align="center"><img src="http://mediabunker.com/email/windows.png" /></td>
                        <td align="center"><img src="http://mediabunker.com/email/html.png" /></td>
                        </tr>
                      <tr>
                        <td align="center" style="font-family:Helvetica; font-size:1em;">Microsoft en Nokia bieden<br />
                          samen de Windows Phone, <br />
                          voor de conventionele liefhebbers.</td>
                        <td align="center" style="font-family:Helvetica; font-size:1em;">Ook een mobiele web app<br />
                          in HTML5 en CSS3<br />
                          is geen probleem!</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr width="600px">
                <td><img src="http://mediabunker.com/email/actie.png" align="absbottom"></td>
            </tr>
            <tr width="600px">
                <td>
                    <table border="0" HALIGN="center" style="margin-bottom:30px; margin-top:20px;">
                      <tr align="center">
                        <td align="center" width="189px" style="font-family:Helvetica; font-size:1em;"><font color="white">Suikersilo-West 23 <br />1165 MP Halfweg</font></td>
                        <td align="center" width="189px" style="font-family:Helvetica; font-size:1em;"><a href="tel:0031238200140">Tel +31 23 820 0140</a><br> <a href="mailto:info@mediabunker.com">info@mediabunker.com</a></td>
                        <td align="center" width="189px" style="font-family:Helvetica; font-size:1em;"><a href="http://mediabunker.com">www.mediabunker.com</a><br> <a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a></td>
                      </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

在线版FWIW; http://mediabunker.com/email/email.html。并快速上传某人发给我的屏幕截图，这是我认为最新的Outlook版本。

Enter image description here

Answer 1

首先：发送CSS电子邮件时使用HTML类不是一个好主意。它们将在许多客户端被剥离或忽略，包括Outlook。

关于你的问题：对我来说，td的宽度看起来没有正确设置。当我查看您的源代码时，您可以定义表格的宽度tr和td，如下所示。

width="600px"

这应该是

width="600"

代替。但更重要的是，（因为Outlook有时会忽略表中的HTML属性）将内联CSS添加到您的元素中，如下所示：

style="width: 600px"

不要忘记表格单元格（td）和父表格。

我认为应该这样做。

Answer 2

简短回答：
不要在HTML电子邮件中使用标头标签。无论您如何声明标题，一些客户都会破坏您使用标题标记的样式。

删除h1标记
从您遇到问题的文字周围的TR标记中删除所有样式，并将样式放在td标记中。
完全删除该元素周围的宽度，并将其替换为text-align。

答案很长：

尽可能使用折旧的HTML代码而不是CSS。
1. body bgcolor =“”而不是style =“background-color ..
2. td margin =“0”而不是margin =“0 auto”（更好的关闭..使用cellpadding代替）
修正
1. width =“5px”..不要在折旧的html维度中写px（同样适用于cellpadding）
2. margin =“0 auto”..不要使用速记代码
3. line-height ..不要使用line-height，除非你纯粹用它来造型，如果你正在使用它进行正确的格式化。不要指望它工作。
4. h1，h2，h3，h4，h5，h6 ..不要使用它们。
5. p ..不要使用段落，将你的风格放在td中并将每个段落换成td而不是p。

使用此代码将所有头部CSS替换为身体标签，如果您认为需要向头部添加更多CSS，请不要。直到你更精通。这应该可以帮助你..

    <style type="text/css">
        /* Client-specific Styles */
        html>body {width:100% !important;-webkit-text-size-adjust:100%;margin:0;padding:0;}
        body, div, p, a, li, td{-webkit-text-size-adjust:none;}
        .ReadMsgBody, .ExternalClass {width: 100% !important;background-color:#ffffff;}
        .ExternalClass * {line-height: 100%} 
        #outlook a {padding:0;}
        table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
        table td {border-collapse: collapse;}
        img {outline:none;text-decoration:none;-ms-interpolation-mode: bicubic;display:block;}
        a img{border:none;}
        p{margin: 1em 0;}
        a {color:#ffffff;}
        a:link{color:#ffffff;}
        a:visited{color:#ffffff;}
        a:hover{color:#ffffff;}
        .yshortcuts a { border-bottom: none !important;}

    </style>
</head>
<body bgcolor="#000000" style="margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;color:#252525;font-family:Arial,sans-serif;" border="0">

用于Outlook的HTML电子邮件中的巨大字体

2 个答案: