Outlook 2016 更改 table 元素的宽度单位

Question

我有一封带表格的 HTML 电子邮件：

<table class='top-level' cellpadding="0" cellspacing="0" border="0" 
  width="630" height="717" bgcolor='#ffffff' style="width:630px; 
  height:717px; background-color: white; background: white; 
  border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">

  <tr>
    <td class='image-container' id="FOOBAR" valign="top" width="630"
      style="width:630px !important; background-color: #DEE7F5; 
      background-image: -webkit-linear-gradient(left, #b6cae8, #ffffff); 
      background-image: -moz-linear-gradient(left, #b6cae8, #ffffff); 
      background-image: -o-linear-gradient(left, #b6cae8, #ffffff);  
      background-image: linear-gradient(#b6cae8, white); background: 
      linear-gradient(#b6cae8, white);">

      <!--[if gte mso 9]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:630px;">
          <v:fill type="gradient" color="#ffffff" color2="#b6cae8" />
          <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
      <![endif]-->

      <div><table><!-- stuff --></table></div>

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

    </td>
  </tr>

</table>

这在 Outlook 2007/10/13 以及我关心的所有其他客户端中完美运行，除了 Outlook 2016（Windows 版本）。在 Outlook 2016 中，td.image-container 元素仅显示预期宽度的 2/3 左右。当我查看HTML（通过将消息保存为HTML）时，它显示我在style属性中设置的宽度是以pt为单位并且之间的关系Outlook 值和我的原始值不清楚。重新格式化还会删除我的 class 和我的 ID。

width 属性似乎设置为等于 style 属性中的点值的像素值。因为即使在没有宽度属性的元素上 style 宽度也是以磅为单位设置的，所以我假设它是调整 width 值的 style 值。

如何确保我的原始宽度得到尊重？

<html xmlns:v="urn:schemas-microsoft-com:vml"
  xmlns:o="urn:schemas-microsoft-com:office:office"
  xmlns:w="urn:schemas-microsoft-com:office:word"
  xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
  xmlns="http://www.w3.org/TR/REC-html40">
<head>...</head>
<body bgcolor=white lang=DE link="#497CBE" vlink="#497CBE" style='tab-interval:
  35.4pt' alink="#497cbe">
<div class=WordSection1>

<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width=945
  style='width:472.5pt;background:white;border-collapse:collapse;mso-yfti-tbllook:
  1184;mso-padding-alt:0cm 0cm 0cm 0cm'>

  <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
    <td width=630 valign=top style='width:315.0pt;background:#DEE7F5;
      padding:0cm 0cm 0cm 0cm'>
    <p class=MsoNormal><!--[if mso & !supportInlineShapes & supportFields]><span
      style='font-size:10.5pt;font-family:"Arial",sans-serif;mso-fareast-font-family:
      "Times New Roman"'><span style='mso-element:field-begin;mso-field-lock:yes'></span><span
      style='mso-spacerun:yes'> </span>SHAPE <span
      style='mso-spacerun:yes'> </span>\* MERGEFORMAT <span style='mso-element:
      field-separator'></span></span><![endif]--><span style='font-size:10.5pt;
      font-family:"Arial",sans-serif;mso-fareast-font-family:"Times New Roman"'>

      <!-- This linebreak added for readability; the conditional tag below was originally directly after the previous span tag -->

      <!--[if gte vml 1]><v:rect
      id="_x0000_s1026" style='width:315pt;height:730.7pt;mso-left-percent:-10001;
      mso-top-percent:-10001;mso-position-horizontal:absolute;
      mso-position-horizontal-relative:char;mso-position-vertical:absolute;
      mso-position-vertical-relative:line;mso-left-percent:-10001;
      mso-top-percent:-10001' stroked="f">

      <v:fill color2="#b6cae8" type="gradient"/>
      <v:textbox style='mso-fit-shape-to-text:t' inset="0,0,0,0">

        <![if !mso]>
          <!-- doesn't matter --><![endif]>
        <div>
          <table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0
          width=945 style='width:472.5pt;border-collapse:collapse;mso-yfti-tbllook:
          1184;mso-padding-alt:0cm 0cm 0cm 0cm'>

          <!-- table stuff -->

          </table>
          <p class=MsoNormal><span style='mso-fareast-font-family:"Times New Roman"'><o:p>&nbsp;</o:p></span></p>
        </div>
        <![if !mso]><!-- doesn't matter -->
      <![endif]></v:textbox>
    </v:rect><![endif]--></span><!--[if mso & !supportInlineShapes & supportFields]><span
    style='font-size:10.5pt;font-family:"Arial",sans-serif;mso-fareast-font-family:
    "Times New Roman"'><v:shape id="_x0000_i1027" type="#_x0000_t75" style='width:315pt;
    height:730.7pt'>
    <v:imagedata croptop="-65520f" cropbottom="65520f"/>
    </v:shape><span style='mso-element:field-end'></span></span><![endif]--><span
    style='font-size:10.5pt;font-family:"Arial",sans-serif;mso-fareast-font-family:
    "Times New Roman"'><o:p></o:p></span></p>
    </td>
  </tr>

</table>

</div>
</body>
</html>

值得注意：电子邮件在 Windows 上的 Outlook 2016 的 Email On Acid 测试套件中按要求显示，但在安装华硕笔记本电脑（UX301 w/ i7）上查看时显示此处描述的损坏行为-4558U CPU @2.8GHz & Iris Graphics 5100) 运行 Windows 10 主页（版本 1511 内部版本 10586.36）。

Answer 1

Outlook（无论什么版本）将您所有的像素转换为点。那么您的电子邮件将在高 PDI 笔记本电脑上被破坏。

Here描述问题并给出解决方案。

Outlook 2016 更改 table 元素的宽度单位

Outlook 2016 changes units of width on table elements

email

outlook

html-email

office-2016