Question

我一直在使用HTML电子邮件模板。而我几乎完成了我的工作。该模板在市长电子邮件客户端看起来相当不错。但是Outlook 2007/2010/2013存在问题。那三个家伙不尊重我的模板的最大宽度。我真的不知道为什么会这样。

你有什么想法吗？
任何建议将被认真考虑。谢谢。

<body style="margin:0; font-size:13px; font-family:'Trebuchet MS', Helvetica, Verdana, Arial;" bgcolor="#bb9dd8">   

    <table width="100%" cellspacing="0" cellpadding="0" border="0">     
        <tr>
            <td bgcolor="#bb9dd8">

            <!-- //Begin Main Container\\  -->              
                <table class="mainContainer" style="margin-top:20px;" width="640px"  align="center" cellspacing="0" cellpadding="0" border="0">

        <!-- //From here begin header and the layout structure\\  -->

这是定义最大宽度的代码段。谢谢。

Answer 1

您是对的，Outlook 2007+的PC版本不支持max-widths。但是，您可以采用两种方法中的一种来实现流体宽度。

使用一些Outlook条件代码来建立固定宽度表。其他电子邮件客户端将忽略此操作。

<table width="100%">
  <tr>
    <td>
      <!--[if gte mso 9]>
        <table width="640" style="width:640px">
          <tr>
            <td>
              <![endif]-->
                Put main content table here
              <!--[if gte mso 9]>
           </td>
         </tr>
        </table>
     <![endif]-->
    </td>
  </tr>
</table>

另一种方法涉及使用媒体查询和3列表。外部列将具有不间断的空格，中间将设置为Outlook宽度并包含主表。

<style>
@media only screen and (min-width: 640px) {
  .maxW {width: 640px !important;}
}
</style>
<table align="center" width="100%" >
   <tr>
      <td>&nbsp;</td>
      <td align="center"  valign="top" width="640" style="width:640px" >
         <table align="center" style="margin: auto; max-width: 640px" width="100%" class="maxW">
            <tr>
               <td>Put your header image here</td>

Answer 2

只需从宽度中删除px，您可以尝试使用width =“ 640”而不是width =“ 640px”

Answer 3

在Mso条件中包装已定义的表或在样式表中设置具有已定义宽度的ID，该ID在媒体查询中更改为百分比。 Outlook不尊重max-width。有关CSS兼容性的信息，请参阅here。

另外 - 在定义HTML宽度时不要放px。那只是在CSS中。例如。宽度=“640”不宽度=“640px”

标记的属性“宽度”在Outlook中无法正常工作

3 个答案: