2

我有一个带有表格的 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 值与我的原始值之间的关系不清楚。重新格式化也剥夺了我的班级和我的身份证。

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

我怎样才能确保我的原始宽度得到尊重？

<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 图形）上查看时显示此处描述的损坏行为5100）运行 Windows 10 家庭版（版本 1511 构建 10586.36）。

4

1 回答 1

2

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

这里描述了问题并提供了解决方案。

于 2016-05-17T18:17:05.270 回答