0

我正在为多个电子邮件客户端设计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 版本。

在此处输入图像描述

4

2 回答 2

1

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

关于您的问题：在我看来，td's 的宽度设置不正确。当我查看您的源代码时，您定义了表格的宽度，tr's 和td' 如下。

width="600px"

这应该是

width="600"

反而。然而，更重要的是（因为 Outlook 有时喜欢忽略表格上的 HTML 属性）将内联 CSS 添加到您的元素中，如下所示：

style="width: 600px"

不要忘记表格单元格 ( td) 和父表格。

我认为应该这样做。

于 2012-07-13T16:02:16.323 回答
1

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

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

长答案：

  1. 尽可能使用折旧的 HTML 标签，而不是 CSS。

    1. body bgcolor="" 而不是 style="background-color..
    2. td margin="0" 而不是 margin="0 auto" （更好.. 使用 cellpadding 代替）
  2. 使固定
    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 直到你的 body 标签，如果你认为你需要在头部添加更多的 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">
于 2014-01-07T08:15:12.733 回答