<table> 标记的属性 "Width" 在 Outlook 中无法正常工作

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

要么在 Mso 条件中包含一个定义的 table，要么在样式 sheet 中设置一个具有定义宽度的 ID，该 ID 在媒体查询中变回百分比。 Outlook 不遵守最大宽度。有关 CSS 兼容性，请参阅 here。

此外 - 在定义 HTML 宽度时不要放置 px。这仅在 CSS 中。例如。宽度="640" 不是宽度="640px"

Answer 2

你说得对，PC 版 Outlook 2007+ 不支持最大宽度。不过，您可以在此处采用两种方法之一来实现流畅的宽度。

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

<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 列 table。外列将有不间断的空格，中间将设置为您的 Outlook 宽度并包含您的主要 table.

<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 3

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

<table> 标记的属性 "Width" 在 Outlook 中无法正常工作

Attribute "Width" of <table> tag does not work properly in Outlook

html

css

outlook

html-email