字体/填充未正确显示在电子邮件中的Outlook 2007

Question

我目前正在创建一封邮件，但我有一个字体和填充没有正确显示在表中的问题（到目前为止，问题发生）。

实施例：http://i.imgur.com/apHAQpf.png

<table id="header" width="800" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td valign="top" height="350" background="https://gallery.mailchimp.com/31b5556e401fca10882aaeeff/images/541e9551-8e52-4234-adda-f07326a65e6c.png" bgcolor="#222222" style="height:350px;background-image:url('https://gallery.mailchimp.com/31b5556e401fca10882aaeeff/images/541e9551-8e52-4234-adda-f07326a65e6c.png');background-color:#222222;"> 

    <!--[if gte mso 9]> 
    <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; width: 800px; height: 350px;" src="https://gallery.mailchimp.com/31b5556e401fca10882aaeeff/images/541e9551-8e52-4234-adda-f07326a65e6c.png" /> 
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width: 800px; height: 350px;"> 
    <v:fill opacity="0%" color="#222222" /> 
    <v:textbox> 
    <![endif]--> 

    <div style="padding:30px 100px 30px 50px !important;font-family:'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif !important;"> 
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et cursus sem. Nam viverra in diam auctor maximus. In laoreet ipsum eget augue iaculis congue. In placerat efficitur ex. Maecenas vel dui vitae risus lacinia viverra. Nunc dapibus placerat augue, non condimentum metus aliquet at.</p> 
    <span><a href="#" class="more light">Meer</a></span> 
    </div> 

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

我已经通过ID /类中使用CSS试过，直接在线（如上）。但它似乎没有帮助。当我不使用背景图像时，会加载正确的字体和填充。

有人知道解决方案如何解决这个问题？

Answer 1

我在增加了一个表的VML所以你必须只为前景呈现填充表。

<table id="header" width="800" border="0" cellspacing="0" cellpadding="0"> 
 
<tr> 
 
<td valign="top" height="350" background="https://gallery.mailchimp.com/31b5556e401fca10882aaeeff/images/541e9551-8e52-4234-adda-f07326a65e6c.png" bgcolor="#222222" style="height:350px;background-image:url('https://gallery.mailchimp.com/31b5556e401fca10882aaeeff/images/541e9551-8e52-4234-adda-f07326a65e6c.png');background-color:#222222;"> 
 

 
    <!--[if gte mso 9]> 
 
    <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; width: 800px; height: 350px;" src="https://gallery.mailchimp.com/31b5556e401fca10882aaeeff/images/541e9551-8e52-4234-adda-f07326a65e6c.png" /> 
 
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width: 800px; height: 350px;"> 
 
    <v:fill opacity="0%" color="#222222" /> 
 
    <v:textbox> 
 
    
 

 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="padding:30px 100px 30px 50px;>  
 
     
 
     
 
     <![endif]--> 
 
    
 
    <div style="padding:30px 100px 30px 50px !important;font-family:'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif !important; color:#ffffff;"> 
 
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et cursus sem. Nam viverra in diam auctor maximus. In laoreet ipsum eget augue iaculis congue. In placerat efficitur ex. Maecenas vel dui vitae risus lacinia viverra. Nunc dapibus placerat augue, non condimentum metus aliquet at.</p> 
 
    <span><a href="#" class="more light">Meer</a></span> 
 
    </div> 
 

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

让我知道这对你的作品。