3

我正在编写 HTML 电子邮件,到目前为止它运行良好。我选择使用背景图像以方便一致性,我使用的解决方案来自以下线程:

未显示背景图像样式的 html 电子邮件

它在我测试的邮件客户端(Outlook、Hotmail、GMail 和 Mail)中运行良好,但是在某些客户端中,单元格的背景图像在浏览器窗口中重复出现(就好像图像应用于 body 标签一样)。如果我将正文标记设置为 600 像素而不是 100%,它可以解决问题,我只会在所有客户端中看到背景一次,但是当我这样做时,在 Outlook 中,文本内容消失了。

谁能建议一个解决方案来为我解决这个问题?

我的整个代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Metanium</title>

<style type="text/css">

    #outlook a{
        padding:0;
    }
    body{
        width:100% !important;
    }
    .ReadMsgBody{
        width:100%;
    }
    .ExternalClass{
        width:100%;
    }
    body{
        -webkit-text-size-adjust:none;
    }
    body{
        margin:0;
        padding:0;
    }
    img{
        border:0;
        height:auto;
        line-height:100%;
        outline:none;
        text-decoration:none;
    }
    table td{
        border-collapse:collapse;
    }
    #backgroundTable{
        height:100% !important;
        margin:0;
        padding:0;
        width:100% !important;
    }
/*
@tab Page
@section background color
@tip Set the background color for your email. You may want to choose one that matches your company's branding.
@theme page
*/
    body,#backgroundTable{
        /*@editable*/background-color:#FAFAFA;
    }
/*
@tab Page
@section email border
@tip Set the border for your email.
*/
    #templateContainer{
        /*@editable*/border:1px solid #DDDDDD;
    }
/*
@tab Page
@section heading 1
@tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
@style heading 1
*/
    h1,.h1{
        /*@editable*/color:#202020;
        display:block;
        /*@editable*/font-family:Arial;
        /*@editable*/font-size:34px;
        /*@editable*/font-weight:bold;
        /*@editable*/line-height:100%;
        margin-top:0;
        margin-right:0;
        margin-bottom:10px;
        margin-left:0;
        /*@editable*/text-align:left;
    }
/*
@tab Page
@section heading 2
@tip Set the styling for all second-level headings in your emails.
@style heading 2
*/
    h2,.h2{
        /*@editable*/color:#202020;
        display:block;
        /*@editable*/font-family:Arial;
        /*@editable*/font-size:30px;
        /*@editable*/font-weight:bold;
        /*@editable*/line-height:100%;
        margin-top:0;
        margin-right:0;
        margin-bottom:10px;
        margin-left:0;
        /*@editable*/text-align:left;
    }
/*
@tab Page
@section heading 3
@tip Set the styling for all third-level headings in your emails.
@style heading 3
*/
    h3,.h3{
        /*@editable*/color:#202020;
        display:block;
        /*@editable*/font-family:Arial;
        /*@editable*/font-size:26px;
        /*@editable*/font-weight:bold;
        /*@editable*/line-height:100%;
        margin-top:0;
        margin-right:0;
        margin-bottom:10px;
        margin-left:0;
        /*@editable*/text-align:left;
    }
/*
@tab Page
@section heading 4
@tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
@style heading 4
*/
    h4,.h4{
        /*@editable*/color:#202020;
        display:block;
        /*@editable*/font-family:Arial;
        /*@editable*/font-size:22px;
        /*@editable*/font-weight:bold;
        /*@editable*/line-height:100%;
        margin-top:0;
        margin-right:0;
        margin-bottom:10px;
        margin-left:0;
        /*@editable*/text-align:left;
    }
/*
@tab Header
@section preheader style
@tip Set the background color for your email's preheader area.
@theme page
*/
    #templatePreheader{
        /*@editable*/background-color:#FAFAFA;
    }
/*
@tab Header
@section preheader text
@tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
*/
    .preheaderContent div{
        /*@editable*/color:#505050;
        /*@editable*/font-family:Arial;
        /*@editable*/font-size:10px;
        /*@editable*/line-height:100%;
        /*@editable*/text-align:left;
    }
/*
@tab Header
@section preheader link
@tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
*/
    .preheaderContent div a:link,.preheaderContent div a:visited,.preheaderContent div a .yshortcuts {
        /*@editable*/color:#336699;
        /*@editable*/font-weight:normal;
        /*@editable*/text-decoration:underline;
    }
/*
@tab Header
@section header style
@tip Set the background color and border for your email's header area.
@theme header
*/
    #templateHeader{
        /*@editable*/background-color:#FFFFFF;
        /*@editable*/border-bottom:0;
    }
/*
@tab Header
@section header text
@tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/
    .headerContent{
        /*@editable*/color:#202020;
        /*@editable*/font-family:Arial;
        /*@editable*/font-size:34px;
        /*@editable*/font-weight:bold;
        /*@editable*/line-height:100%;
        /*@editable*/padding:0;
        /*@editable*/text-align:center;
        /*@editable*/vertical-align:middle;
    }
/*
@tab Header
@section header link
@tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
*/
    .headerContent a:link,.headerContent a:visited,.headerContent a .yshortcuts {
        /*@editable*/color:#336699;
        /*@editable*/font-weight:normal;
        /*@editable*/text-decoration:underline;
    }
    #headerImage{
        height:auto;
        max-width:600px !important;
    }
/*
@tab Body
@section body style
@tip Set the background color for your email's body area.

    #templateContainer,.bodyContent{
        /*@editable*/background-color:#FFFFFF;
    }
*/
/*
@tab Body
@section body text
@tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
@theme main
*/
    .bodyContent div{
        /*@editable*/color:#505050;
        /*@editable*/font-family:Arial;
        /*@editable*/font-size:14px;
        /*@editable*/line-height:150%;
        /*@editable*/text-align:left;
    }
/*
@tab Body
@section body link
@tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
    .bodyContent div a:link,.bodyContent div a:visited,.bodyContent div a .yshortcuts {
        /*@editable*/color:#336699;
        /*@editable*/font-weight:normal;
        /*@editable*/text-decoration:underline;
    }
    .bodyContent img{
        display:inline;
        height:auto;
    }
/*
@tab Footer
@section footer style
@tip Set the background color and top border for your email's footer area.
@theme footer
*/
    #templateFooter{
        /*@editable*/background-color:#FFFFFF;
        /*@editable*/border-top:0;
    }
/*
@tab Footer
@section footer text
@tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
@theme footer
*/
    .footerContent div{
        /*@editable*/color:#707070;
        /*@editable*/font-family:Arial;
        /*@editable*/font-size:12px;
        /*@editable*/line-height:125%;
        /*@editable*/text-align:left;
    }
/*
@tab Footer
@section footer link
@tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
    .footerContent div a:link,.footerContent div a:visited,.footerContent div a .yshortcuts {
        /*@editable*/color:#336699;
        /*@editable*/font-weight:normal;
        /*@editable*/text-decoration:underline;
    }
    .footerContent img{
        display:inline;
    }
/*
@tab Footer
@section social bar style
@tip Set the background color and border for your email's footer social bar.
@theme footer
*/
    #social{
        /*@editable*/background-color:#FAFAFA;
        /*@editable*/border:0;
    }
/*
@tab Footer
@section social bar style
@tip Set the background color and border for your email's footer social bar.
*/
    #social div{
        /*@editable*/text-align:center;
    }
/*
@tab Footer
@section utility bar style
@tip Set the background color and border for your email's footer utility bar.
@theme footer
*/
    #utility{
        /*@editable*/background-color:#FFFFFF;
        /*@editable*/border:0;
    }
/*
@tab Footer
@section utility bar style
@tip Set the background color and border for your email's footer utility bar.
*/
    #utility div{
        /*@editable*/text-align:center;
    }
    #monkeyRewards img{
        max-width:190px;
    }

</style>

</head>

<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">

<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">

<tr>
<td background="http://clients.networkdm.co.uk/externalresources/emailparts/5435/bg.jpg" height="895" width="600">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:895px; width:600px;top:0;left:0;border:0;z-index:1;' src="http://clients.networkdm.co.uk/externalresources/emailparts/5435/bg.jpg"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:895px; width:600px;top:-5;left:-10;border:0;z-index:2;'>
<div>
<![endif]-->
<!-- This is where you nest a table with the content that will float over the image -->

<table height="895" width="600" cellpadding="0" cellspacing="0" border="0">

    <tr>
        <td height="263" width="600" valign="top" style="padding:0px; padding-top: 215px; padding-left: 338px; padding-right: 20px; width: 242px;">
            <span style="font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 14px; line-height: 1.4; color: #5a488f; width: 600px;">
                We are giving away an exclusive set of seven Metanium Everyday baby 
                grows every day for the rest of 2012 - one for every day of the week!
                <br /><br />
            </span>

            <span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.4; color: #5a488f; width: 600px;">
                Each daily winner will also receive a full size sample of Metanium 
                Everyday Barrier Ointment.
                <br /><br />
                To enter*, and for terms and conditions, visit our online competition 
                page by clicking on the link below.
            </span>
        </td>
    </tr>

    <tr>
        <td height="45" width="600" valign="top" align="center">
            <img src="http://clients.networkdm.co.uk/externalresources/emailparts/5435/enter.jpg" alt="Click here to enter!" />
        </td>
    </tr>

    <tr>
        <td width="600" valign="top" align="left" style="padding: 0px; padding-left: 163px; padding-top: 25px; padding-right: 140px; width: 297px;">
            <img src="http://clients.networkdm.co.uk/externalresources/emailparts/5435/protection.jpg" alt="Everyday nappy rash protection" /><br /><br />

            <span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.4; color: #5a488f; width: 600px;">
                New Metanium Everyday Barrier Ointment has a unique double action
                formula to provide protection from nappy rash. It doesn't contain
                fragrance or lanolin, so is gentle enough to use at each nappy change.
            </span>
        </td>
    </tr>

</table>

</td>
</tr>

</table>

</body>
</html>
4

1 回答 1

4

您的包装表设置为 100% 宽,而具有背景的单元格具有像素宽度。这不是表应该如何工作的。

使背景图像的表格和单元格宽度相同。

用 css 将表格居中,或者用另一个表格包裹它。什么都行。

于 2012-11-05T14:44:28.827 回答