1

我制作了一个 HTML 邮件模板。此模板适用于所有市长邮件客户端(gmail、thunderbird 等),Outlook 2007/2010 除外。Outlook 2003 可以很好地显示邮件。

这是正确的布局,橙色的标题栏显示在正确的位置:

在 Outlook 2003 中正确显示

这就是 Outlook 2007/2010 的问题所在。标题栏位于正文之外,位于邮件顶部:

Outlook 2007 显示错误

这是我的模板:

  <html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <title>Wieskamp Nieuwsbrief</title>
<style type="text/css">
body,td{font-family: Verdana, Arial; font-size: 12px;color: black;}
.header{font-size:12px;font-weight:bold;color: #f4f4be;text-align:center;}
v:* { behavior: url(#default#VML); display: inline-block; }
</style>

</head>
<body style="margin: 0">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td align="center">
            <table border="0" cellpadding="0" cellspacing="0" width="600">
                <tr>
                    <td background="http://www.wieskamp.nl/media/nieuwsbrief/wieskamp-nieuwsbrief-header.jpg" bgcolor="#f6f6f6" width="600" height="226" valign="top">
                <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:226px;">
                <v:fill type="tile" src="http://www.wieskamp.nl/media/nieuwsbrief/wieskamp-nieuwsbrief-header.jpg" color="#f6f6f6" size="600px,226px"/>
                <v:textbox inset="0,0,0,0">
                <![endif]-->
                    <div>

                    </div>
                <!--[if gte mso 9]>
                </v:textbox>
                </v:rect>
                <![endif]-->
                    </td>
                </tr>
                <tr>
                    <td background="http://www.wieskamp.nl/media/nieuwsbrief/wieskamp-nieuwsbrief-midden.jpg" bgcolor="#cfd300" width="600" valign="top" style="background-repeat: repeat-y no-repeat;">
                    <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
                    <v:fill type="tile" src="http://www.wieskamp.nl/media/nieuwsbrief/wieskamp-nieuwsbrief-midden.jpg" color="#f4f4be" size="600px,6px" />
                    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                    <![endif]-->
                        <div>           
                            <table border="0" cellpadding="0" cellspacing="0" width="600">
                                <tr>
                                    <td width="40"></td>
                                    <td colspan="3" align="center" background="http://www.wieskamp.nl/media/nieuwsbrief/header_balk.jpg" bgcolor="#cfd300" width="520" height="26" valign="top" style="color: #f4f4be;font-weight: bold;vertical-align: middle;background-repeat: repeat-y no-repeat;">
                                        <!--[if gte mso 9]>
                                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:520px;height:26px;">
                                        <v:fill type="tile" src="http://www.wieskamp.nl/media/nieuwsbrief/header_balk.jpg" color="#f6f6f6" size="520px,26px"/>
                                        <v:textbox inset="0,0,0,0">
                                        <![endif]-->
                                        <div>
                                        Headerbalk

                                        </div>
                                        <!--[if gte mso 9]>
                                        </v:textbox>
                                        </v:rect>
                                        <![endif]-->
                                    </td>
                                    <td width="40"></td>                                    
                                </tr>
                                <tr><td colspan="6">&nbsp;</td></tr>
                                <tr>
                                    <td width="40"></td>
                                    <td width="10"></td>
                                    <td width="124" valign="top"><img src="http://www.wieskamp.nl/media/nieuwsbrief/plaatjes.jpg" width="114" height="160"/></td>
                                    <td width="386" valign="top">
                                    <b>Er gaat iets gebeuren</b><br><br>
                                    22 februari 2013<br><br>
                                     De bomen worden weer fris groen, de bloeitijd begint. De lucht geurt van bloesem en het eerste gemaaide gras. De vogels geven hun concert bij de opgaande zon. De lente is een uitstekend jaargetijde om op vakantie te gaan in het Nationale Landschap Winterswijk. 

De lente loopt van maart tot en met juni op Camping Het Wieskamp. Natuurlijk is er met Pasen, Hemelvaart en Pinksteren veel te beleven op het terrein. Maar daarom heen vindt u de rust op de standplaats, en ook erbuiten. Al wandelend of fietsend ontdekt u de nestelende vogels. de bloeiende hoogstamfruitbomen en het frisse groen van de omliggende natuurgebieden. 
                                    </td>
                                    <td width="40"></td>
                                </tr>
<tr><td colspan="6">&nbsp;</td></tr>
                            </table>
                            <table border="0" cellpadding="0" cellspacing="0" width="600">
                                <tr>
                                    <td width="40"></td>
                                    <td colspan="3" align="center" background="http://www.wieskamp.nl/media/nieuwsbrief/header_balk.jpg" bgcolor="#cfd300" width="520" height="26" valign="top" style="color: #f4f4be;font-weight: bold;vertical-align: middle;background-repeat: repeat-y no-repeat;">
                                        <!--[if gte mso 9]>
                                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:520px;height:26px;">
                                        <v:fill type="tile" src="http://www.wieskamp.nl/media/nieuwsbrief/header_balk.jpg" color="#f6f6f6" size="520px,26px"/>
                                        <v:textbox inset="0,0,0,0">
                                        <![endif]-->
                                        <div>
                                        Headerbalk
                                        </div>
                                        <!--[if gte mso 9]>
                                        </v:textbox>
                                        </v:rect>
                                        <![endif]-->
                                    </td>
                                    <td width="40"></td>                                    
                                </tr>
                                <tr><td colspan="6">&nbsp;</td></tr>
                                <tr>
                                    <td width="40"></td>
                                    <td width="10"></td>
                                    <td width="124" valign="top"><img src="http://www.wieskamp.nl/media/nieuwsbrief/plaatjes.jpg" width="114" height="160"/></td>
                                    <td width="386" valign="top">
                                    <b>Er gaat iets gebeuren</b><br><br>
                                    22 februari 2013<br><br>
                                     De bomen worden weer fris groen, de bloeitijd begint. De lucht geurt van bloesem en het eerste gemaaide gras. De vogels geven hun concert bij de opgaande zon. De lente is een uitstekend jaargetijde om op vakantie te gaan in het Nationale Landschap Winterswijk. 

De lente loopt van maart tot en met juni op Camping Het Wieskamp. Natuurlijk is er met Pasen, Hemelvaart en Pinksteren veel te beleven op het terrein. Maar daarom heen vindt u de rust op de standplaats, en ook erbuiten. Al wandelend of fietsend ontdekt u de nestelende vogels. de bloeiende hoogstamfruitbomen en het frisse groen van de omliggende natuurgebieden. 
                                    </td>
                                    <td width="40"></td>
                                </tr>
                            </table>
                        </div>
                    <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->
                    </td>

                </tr>
                <tr>
                    <td background="http://www.wieskamp.nl/media/nieuwsbrief/wieskamp-nieuwsbrief-footer.jpg" bgcolor="#f6f6f6" width="600" height="88" valign="top">
                <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:88px;">
                <v:fill type="tile" src="http://www.wieskamp.nl/media/nieuwsbrief/wieskamp-nieuwsbrief-footer.jpg" color="#f6f6f6" size="600px,88px"/>
                <v:textbox inset="0,0,0,0">
                <![endif]-->
                    <div>

                    </div>
                <!--[if gte mso 9]>
                </v:textbox>
                </v:rect>
                <![endif]-->
                    </td>                   
                </tr>
            </table>
        </td>
    </tr>


  </table>
</body>
</html>
4

0 回答 0