电子邮件图像显示在Outlook中表格行上方

时间:2018-07-27 23:30:57

标签: outlook html-email

我无法让图像在Outlook中正确显示正在创建的电子邮件。在Outlook中,图像显示被裁剪。单击该图像时,您可以看到该图像的轮廓线控点,并且前两个位于包含该图像的行上方表格行的顶部。 (这很奇怪,因为该行位于带有图像的表的父表中。)

我尝试了所有发现的常规修复程序-将img设置为display: block,使包含的<td>具有行高,甚至设置了height属性以确保有足够的空间渲染图像。

任何帮助将不胜感激。

编辑:我已经将包装的html添加到以下代码块中。除了已发布的内容外,没有其他CSS。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <!--<![endif]-->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title></title>
  <style>
  /* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
  body { 
   margin:0 !important;
   padding:0 20px;
   -webkit-text-size-adjust:none; 
   -ms-text-size-adjust:none; 
  }
  img {
   border: 0;
  }
  div[style*="margin: 16px 0"] { 
   margin:0 !important;
  }
  .wrapper {
   width: 100%;
   table-layout: fixed;
  }
  .outer {
   Margin: 0 auto;
   width: 100%;
   max-width: 600px;
  }
  p {
   Margin: 0;
  }
  td.phone { display:none !important; }
  .contents td { font: 13px/1.45em Arial, Helvetica, sans-serif; mso-line-height-rule: exactly; padding-top: 20px; width: 100%; }
  </style>
  <!--[if (gte mso 9)|(IE)]>
   <style type="text/css">
    table {border-collapse: collapse;}
   </style>
  <![endif]-->
 </head>
 <body>
  <div class="bdy">
   <style type="text/css">
   <!--
    .x_full-width
     {width:640px}
    table.x_editor-body
     {width:100%}
    table.x_row
     {padding:0px;
     width:100%}
    table.x_row td.x_last
     {padding-right:0px}
    table.x_columns, table.x_column
     {padding-right:0;
     margin:0 auto}
    .x_el-button table.x_el-wrapper
     {border-collapse:separate}
    td.x_wrapper
     {padding:0}
    .x_hide-for-desktop
     {}
    .x_hide-for-desktop .x_hide-for-desktop .x_hide-for-desktop .x_hide-for-desktop 
     {}
    .x_loop-item > 
     {table-layout:auto}
    .x_editor-body
     {font-family:"Helvetica","Helvetica Neue","Arial",sans-serif;
     margin:0}
    .x_header-footer
     {margin:0}
    .x_valign
     {vertical-align:top}
    .x_no-padding
     {padding-right:0;
     padding-top:0;
     padding-bottom:0;
     padding-left:inherit}
    .x_row
     {word-break:break-word}
    .x_button
     {border:0;
     border-width:0;
     border-color:none;
     border-style:none;
     outline:0;
     display:block}
    .x_align-left
     {text-align:left}
    .x_align-right
     {text-align:right}
   -->
   </style>
   <style>
   <!--
    .x_wrapper
     {width:100%;
     table-layout:fixed}
    .x_outer
     {margin:0 auto;
     width:100%;
     max-width:600px}
    td.x_phone
     {}
    .x_contents 
     {font:13px/1.45em Arial,Helvetica,sans-serif;
     padding-top:20px;
     width:100%}
   -->
   </style>
   <div style="margin:0">
    <table class="x_editor-body" style="border-collapse:collapse; font-family:&quot;Helvetica&quot;,&quot;Helvetica Neue&quot;,&quot;Arial&quot;,sans-serif; width:100%">
     <tbody>
      <tr>
       <td style="padding:0" valign="top" align="center">
        <table class="x_import-message" style="font-size:16px; text-align:center; font-family:Arial,Helvetica,sans-serif; padding:10px; border-collapse:collapse" cellspacing="0" cellpadding="0" border="0">
         <tbody>
          <tr>
           <td>
            <table class="x_row x_import-container x_import-container-5 x_import-container-99530235118" style="border-spacing:0px; border-collapse:collapse; word-break:break-word; padding:0px; width:100%" cellspacing="0" cellpadding="0">
             <tbody>
              <tr>
               <td class="x_wrapper x_valign" style="vertical-align:top; padding:0">
                <table class="x_columns x_import-column x_import-column-1" style="width:640px; border-collapse:collapse; padding-right:0; margin:0 auto" cellspacing="0" cellpadding="0">
                 <tbody>
                  <tr>
                   <td class="x_column-content x_valign x_no-padding" style="width:640px; vertical-align:top; padding-right:0; padding-top:0; padding-bottom:0; padding-left:inherit">
                    <table style="table-layout:fixed; border-collapse:collapse" width="100%" cellspacing="0" cellpadding="0">
                     <tbody>
                      <tr>
                       <td class="x_import-element x_import-element-block x_import-element-1 x_import-element-45561606396" style="text-align:center; font-size:16px; padding:0; line-height:normal; font-family:Arial,Helvetica,sans-serif; width:640px" align="left">
                        <div style="text-align:center">
                         <table id="blockOrderEmailItems" cellspacing="0" cellpadding="0" border="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
                          <tr>
                           <td width="10" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">&nbsp;</td>
                           <td class="padding" width="620" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; padding: 0px 0px 20px 0px; text-align: left;">
                            <table id="orderItemsWrapper" cellspacing="0" cellpadding="0" border="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
                             <thead style="background: #DEDEDE;">
                              <tr>
                               <th class="orderItemTitle" align="left" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: 600; mso-line-height-rule: exactly; font-size: 16px; text-align: left; width: 270px; padding: 5px;">Item Name</th>
                               <th class="orderItemSku" align="center" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: 600; mso-line-height-rule: exactly; font-size: 16px; text-align: center; padding: 5px;">Item Number</th>
                               <th class="orderItemQty" align="right" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: 600; mso-line-height-rule: exactly; font-size: 16px; text-align: right; width: 40px; padding: 5px;">Qty</th>
                               <th class="orderItemPrice" align="right" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: 600; mso-line-height-rule: exactly; font-size: 16px; text-align: right; width: 80px; padding: 5px;">Price</th>
                              </tr>
                             </thead>
                             <tbody>
                              <tr class="orderItemConfigurable" style="padding: 5px;">
                               <td class="orderItemTitle" align="left" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left; font-size: 16px; width: 270px; padding: 5px;">
                                <a href="producutlink_here" style="color: #3696C2; text-decoration: underline solid #3696C2;">Fox Racing V2 Overseer Helmet</a>
                               </td>
                               <td class="orderItemSku" align="center" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: center; font-size: 16px; padding: 5px;">07120-001-XS</td>
                               <td class="orderItemQty" align="right" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: right; font-size: 16px; width: 40px; padding: 5px;">1</td>
                               <td class="orderItemPrice" align="right" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: right; font-size: 16px; width: 80px; padding: 5px;">
                                <span class="price">$179.97</span>
                               </td>
                              </tr>
                              <tr>
                               <td class="orderItemConfigurable" colspan="4" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left; padding: 5px;">
                                <table cellspacing="0" cellpadding="0" border="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
                                 <tr>
                                  <td class="padding" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; padding: 0px 0px 20px 0px; text-align: left;">
                                   <table cellspacing="0" cellpadding="0" border="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
                                    <tr>
                                     <td width="145" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">
                                      <table cellspacing="0" cellpadding="0" border="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
                                       <tr>
                                        <td width="10" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">&nbsp;</td>
                                        <td class="orderItemImage" width="125" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; width: 125px; line-height: 125px; text-align: left;">
                                         <img src="product_img_link_here" alt="Fox Racing V2 Overseer Helmet" width="125" style="-ms-interpolation-mode: bicubic; width: 125px; height: 125px; display: block;">
                                        </td>
                                        <td width="10" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">&nbsp;</td>
                                       </tr>
                                      </table>
                                     </td>
                                     <td width="5" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">&nbsp;</td>
                                     <td class="orderItemDetails" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">
                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
                                       <tr>
                                        <td style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">
                                         <table cellspacing="0" cellpadding="0" border="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
                                          <tr>
                                           <td colspan="2" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">Item Number:&nbsp;&nbsp;07120-001-XS</td>
                                          </tr>
                                          <tr>
                                           <td colspan="2" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">Color:&nbsp;&nbsp;Black</td>
                                          </tr>
                                          <tr>
                                           <td colspan="2" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">Size:&nbsp;&nbsp;XS</td>
                                          </tr>
                                          <tr>
                                           <td colspan="2" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">Price:&nbsp;&nbsp;<span class="price">$179.97</span></td>
                                          </tr>
                                          <tr>
                                           <td colspan="2" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">Quantity:&nbsp;&nbsp;1</td>
                                          </tr>
                                         </table>
                                        </td>
                                       </tr>
                                      </table>
                                     </td>
                                    </tr>
                                   </table>
                                  </td>
                                 </tr>
                                </table>
                               </td>
                              </tr>
                             </tbody>
                            </table>
                           </td>
                           <td width="10" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">&nbsp;</td>
                          </tr>
                         </table>
                        </div>
                       </td>
                      </tr>
                     </tbody>
                    </table>
                   </td>
                  </tr>
                 </tbody>
                </table>
               </td>
              </tr>
             </tbody>
            </table>
           </td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
     </tbody>
    </table>
   </div>
  </div>
 </body>
</html>

3 个答案:

答案 0 :(得分:0)

我尝试将其添加到原始问题中,但它总是对身体说太长了

这是将Outlook电子邮件另存为html时得到的:

<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>
 <meta http-equiv=Content-Type content="text/html; charset=unicode">
 <meta name=ProgId content=Word.Document>
 <meta name=Generator content="Microsoft Word 14">
 <meta name=Originator content="Microsoft Word 14">
 <link rel=File-List href="ChapMoto%23%20100041953_files/filelist.xml">
 <link rel=Edit-Time-Data href="ChapMoto%23%20100041953_files/editdata.mso">
 <!--[if !mso]>
  <style>
   v\:* {behavior:url(#default#VML);}
   o\:* {behavior:url(#default#VML);}
   w\:* {behavior:url(#default#VML);}
   .shape {behavior:url(#default#VML);}
  </style>
 <![endif]-->
 <!--[if gte mso 9]>
  <xml>
    <o:DocumentProperties>
     <o:Author>AUTHOR</o:Author>
     <o:Template>NormalEmail</o:Template>
     <o:Revision>1</o:Revision>
     <o:TotalTime>0</o:TotalTime>
     <o:Created>2018-07-27T21:48:00Z</o:Created>
     <o:Pages>1</o:Pages>
     <o:Words>1693</o:Words>
     <o:Characters>9655</o:Characters>
     <o:Company>Hewlett-Packard Company</o:Company>
     <o:Lines>80</o:Lines>
     <o:Paragraphs>22</o:Paragraphs>
     <o:CharactersWithSpaces>11326</o:CharactersWithSpaces>
     <o:Version>14.00</o:Version>
    </o:DocumentProperties>
    <o:OfficeDocumentSettings>
     <o:AllowPNG/>
    </o:OfficeDocumentSettings>
  </xml>
 <![endif]-->
 <!--[if gte mso 9]>
  <xml>
    <w:WordDocument>
     <w:Zoom>0</w:Zoom>
     <w:TrackMoves/>
     <w:TrackFormatting/>
     <w:ValidateAgainstSchemas/>
     <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
     <w:IgnoreMixedContent>false</w:IgnoreMixedContent>
     <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
     <w:DoNotPromoteQF/>
     <w:LidThemeOther>EN-US</w:LidThemeOther>
     <w:LidThemeAsian>X-NONE</w:LidThemeAsian>
     <w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
     <w:Compatibility>
      <w:DoNotExpandShiftReturn/>
      <w:BreakWrappedTables/>
      <w:SplitPgBreakAndParaMark/>
      <w:EnableOpenTypeKerning/>
     </w:Compatibility>
     <m:mathPr>
      <m:mathFont m:val="Cambria Math"/>
      <m:brkBin m:val="before"/>
      <m:brkBinSub m:val="&#45;-"/>
      <m:smallFrac m:val="off"/>
      <m:dispDef/>
      <m:lMargin m:val="0"/>
      <m:rMargin m:val="0"/>
      <m:defJc m:val="centerGroup"/>
      <m:wrapIndent m:val="1440"/>
      <m:intLim m:val="subSup"/>
      <m:naryLim m:val="undOvr"/>
     </m:mathPr></w:WordDocument>
  </xml>
 <![endif]-->
 <style>
  <!--
   /* Font Definitions */
   @font-face
    {font-family:Helvetica;
     panose-1:2 11 6 4 2 2 2 2 2 4;
     mso-font-charset:0;
     mso-generic-font-family:swiss;
     mso-font-pitch:variable;
     mso-font-signature:-536859905 -1073711037 9 0 511 0;}
   @font-face
    {font-family:Helvetica;
     panose-1:2 11 6 4 2 2 2 2 2 4;
     mso-font-charset:0;
     mso-generic-font-family:swiss;
     mso-font-pitch:variable;
     mso-font-signature:-536859905 -1073711037 9 0 511 0;}
   @font-face
    {font-family:Calibri;
     panose-1:2 15 5 2 2 2 4 3 2 4;
     mso-font-charset:0;
     mso-generic-font-family:swiss;
     mso-font-pitch:variable;
     mso-font-signature:-536870145 1073786111 1 0 415 0;}
   /* Style Definitions */
   p.MsoNormal, li.MsoNormal, div.MsoNormal
    {mso-style-unhide:no;
     mso-style-qformat:yes;
     mso-style-parent:"";
     margin:0in;
     margin-bottom:.0001pt;
     mso-pagination:widow-orphan;
     font-size:12.0pt;
     font-family:"Times New Roman","serif";
     mso-fareast-font-family:Calibri;
     mso-fareast-theme-font:minor-latin;}
   a:link, span.MsoHyperlink
    {mso-style-noshow:yes;
     mso-style-priority:99;
     color:blue;
     text-decoration:underline;
     text-underline:single;}
   a:visited, span.MsoHyperlinkFollowed
    {mso-style-noshow:yes;
     mso-style-priority:99;
     color:purple;
     text-decoration:underline;
     text-underline:single;}
   p
    {mso-style-noshow:yes;
     mso-style-priority:99;
     margin:0in;
     margin-bottom:.0001pt;
     mso-pagination:widow-orphan;
     font-size:12.0pt;
     font-family:"Times New Roman","serif";
     mso-fareast-font-family:Calibri;
     mso-fareast-theme-font:minor-latin;}
   p.full-width, li.full-width, div.full-width
    {mso-style-name:full-width;
     mso-style-unhide:no;
     margin:0in;
     margin-bottom:.0001pt;
     mso-pagination:widow-orphan;
     font-size:12.0pt;
     font-family:"Times New Roman","serif";
     mso-fareast-font-family:Calibri;
     mso-fareast-theme-font:minor-latin;}
   p.hide-for-desktop, li.hide-for-desktop, div.hide-for-desktop
    {mso-style-name:hide-for-desktop;
     mso-style-unhide:no;
     margin:0in;
     margin-bottom:.0001pt;
     mso-pagination:widow-orphan;
     font-size:12.0pt;
     font-family:"Times New Roman","serif";
     mso-fareast-font-family:Calibri;
     mso-fareast-theme-font:minor-latin;
     display:none;
     mso-hide:all;}
   p.editor-body, li.editor-body, div.editor-body
    {mso-style-name:editor-body;
     mso-style-unhide:no;
     margin:0in;
     margin-bottom:.0001pt;
     mso-pagination:widow-orphan;
     font-size:12.0pt;
     font-family:"Helvetica","sans-serif";
     mso-fareast-font-family:Calibri;
     mso-fareast-theme-font:minor-latin;}
   p.header-footer, li.header-footer, div.header-footer
    {mso-style-name:header-footer;
     mso-style-unhide:no;
     margin:0in;
     margin-bottom:.0001pt;
     mso-pagination:widow-orphan;
     font-size:12.0pt;
     font-family:"Times New Roman","serif";
     mso-fareast-font-family:Calibri;
     mso-fareast-theme-font:minor-latin;}
   p.valign, li.valign, div.valign
    {mso-style-name:valign;
     mso-style-unhide:no;
     margin:0in;
     margin-bottom:.0001pt;
     mso-pagination:widow-orphan;
     font-size:12.0pt;
     font-family:"Times New Roman","serif";
     mso-fareast-font-family:Calibri;
     mso-fareast-theme-font:minor-latin;}
   p.no-padding, li.no-padding, div.no-padding
    {mso-style-name:no-padding;
     mso-style-unhide:no;
     margin:0in;
     margin-bottom:.0001pt;
     mso-pagination:widow-orphan;
     font-size:12.0pt;
     font-family:"Times New Roman","serif";
     mso-fareast-font-family:Calibri;
     mso-fareast-theme-font:minor-latin;}
   p.button, li.button, div.button
    {mso-style-name:button;
     mso-style-unhide:no;
     margin:0in;
     margin-bottom:.0001pt;
     mso-pagination:widow-orphan;
     font-size:12.0pt;
     font-family:"Times New Roman","serif";
     mso-fareast-font-family:Calibri;
     mso-fareast-theme-font:minor-latin;}
   p.align-left, li.align-left, div.align-left
    {mso-style-name:align-left;
     mso-style-unhide:no;
     margin:0in;
     margin-bottom:.0001pt;
     mso-pagination:widow-orphan;
     font-size:12.0pt;
     font-family:"Times New Roman","serif";
     mso-fareast-font-family:Calibri;
     mso-fareast-theme-font:minor-latin;}
   p.align-right, li.align-right, div.align-right
    {mso-style-name:align-right;
     mso-style-unhide:no;
     margin:0in;
     margin-bottom:.0001pt;
     text-align:right;
     mso-pagination:widow-orphan;
     font-size:12.0pt;
     font-family:"Times New Roman","serif";
     mso-fareast-font-family:Calibri;
     mso-fareast-theme-font:minor-latin;}
   p.wrapper, li.wrapper, div.wrapper
    {mso-style-name:wrapper;
     mso-style-unhide:no;
     margin:0in;
     margin-bottom:.0001pt;
     mso-pagination:widow-orphan;
     font-size:12.0pt;
     font-family:"Times New Roman","serif";
     mso-fareast-font-family:Calibri;
     mso-fareast-theme-font:minor-latin;}
   p.outer, li.outer, div.outer
    {mso-style-name:outer;
     mso-style-unhide:no;
     margin:0in;
     margin-bottom:.0001pt;
     mso-pagination:widow-orphan;
     font-size:12.0pt;
     font-family:"Times New Roman","serif";
     mso-fareast-font-family:Calibri;
     mso-fareast-theme-font:minor-latin;}
   span.price
    {mso-style-name:price;
     mso-style-unhide:no;}
   .MsoChpDefault
    {mso-style-type:export-only;
     mso-default-props:yes;
     font-size:10.0pt;
     mso-ansi-font-size:10.0pt;
     mso-bidi-font-size:10.0pt;}
   @page WordSection1
    {size:8.5in 11.0in;
     margin:1.0in 1.0in 1.0in 1.0in;
     mso-header-margin:.5in;
     mso-footer-margin:.5in;
     mso-paper-source:0;}
   div.WordSection1
    {page:WordSection1;}
  -->
 </style>
 <!--[if gte mso 10]>
  <style>
   /* Style Definitions */
   table.MsoNormalTable
    {mso-style-name:"Table Normal";
     mso-tstyle-rowband-size:0;
     mso-tstyle-colband-size:0;
     mso-style-noshow:yes;
     mso-style-priority:99;
     mso-style-parent:"";
     mso-padding-alt:0in 5.4pt 0in 5.4pt;
     mso-para-margin:0in;
     mso-para-margin-bottom:.0001pt;
     mso-pagination:widow-orphan;
     font-size:10.0pt;
     font-family:"Times New Roman","serif";}
  </style>
 <![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple style='tab-interval:.5in'>
<div class=WordSection1>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt;align:center'>
 <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
  <td valign=top style='padding:0in 0in 0in 0in;padding-left:inherit'>
  <div align=center>
  <table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 style='border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt; border-spacing:0px;word-break:break-word'>
   <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
    <td style='padding:7.5pt 7.5pt 7.5pt 7.5pt'>
    <div align=center>
    <table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt;border-spacing:0px;word-break:break-word'>
     <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
      <td width="100%" valign=top style='width:100.0%;padding:0in 0in 0in 0in;padding-left:inherit'>
      <table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width=640 style='width:480.0pt;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt;padding-left:inherit'>
       <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
        <td width=640 valign=top style='width:480.0pt;padding:0in 0in 0in 0in'>
        <table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt'>
         <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
          <td width=640 style='width:480.0pt;padding:0in 0in 0in 0in'>
          <p class=MsoNormal align=center style='text-align:center'><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>&nbsp;<o:p></o:p></span></p>
          <div align=center>
          <table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt' id=blockOrderEmailItems>
           <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
            <td width=10 valign=top style='width:7.5pt;padding:0in 0in 0in 0in'>
            <p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>&nbsp;<o:p></o:p></span></p>
            </td>
            <td width=620 valign=top style='width:465.0pt;padding:0in 0in 15.0pt 0in'>
            <table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt' id=orderItemsWrapper>
             <thead>
              <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes'>
               <td width=270 style='width:202.5pt;background:#DEDEDE;padding:3.75pt 3.75pt 3.75pt 3.75pt'>
               <p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><b><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Item Name<o:p></o:p></span></b></p>
               </td>
               <td style='background:#DEDEDE;padding:3.75pt 3.75pt 3.75pt 3.75pt'>
               <p class=MsoNormal align=center style='text-align:center;line-height:17.4pt;mso-line-height-rule:exactly'><b><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Item Number<o:p></o:p></span></b></p>
               </td>
               <td width=40 style='width:30.0pt;background:#DEDEDE;padding:3.75pt 3.75pt 3.75pt 3.75pt'>
               <p class=MsoNormal align=right style='text-align:right;line-height:17.4pt;mso-line-height-rule:exactly'><b><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Qty<o:p></o:p></span></b></p>
               </td>
               <td width=80 style='width:60.0pt;background:#DEDEDE;padding:3.75pt 3.75pt 3.75pt 3.75pt'>
               <p class=MsoNormal align=right style='text-align:right;line-height:17.4pt;mso-line-height-rule:exactly'><b><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Price<o:p></o:p></span></b></p>
               </td>
              </tr>
             </thead>
             <tr style='mso-yfti-irow:1'>
              <td width=270 valign=top style='width:202.5pt;padding:3.75pt 3.75pt 3.75pt 3.75pt'>
              <p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'><a href="productlink_here" style='text-decoration:solid #3696C2'><span style='color:#3696C2'>Fox Racing V2 Overseer Helmet</span></a> <o:p></o:p></span></p>
              </td>
              <td valign=top style='padding:3.75pt 3.75pt 3.75pt 3.75pt'>
              <p class=MsoNormal align=center style='text-align:center;line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>07120-001-XS <o:p></o:p></span></p>
              </td>
              <td width=40 valign=top style='width:30.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt'>
              <p class=MsoNormal align=right style='text-align:right;line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>1 <o:p></o:p></span></p>
              </td>
              <td width=80 valign=top style='width:60.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt'>
              <p class=MsoNormal align=right style='text-align:right;line-height:17.4pt;mso-line-height-rule:exactly'><span class=price><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>$179.97</span></span><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'> <o:p></o:p></span></p>
              </td>
             </tr>
             <tr style='mso-yfti-irow:2'>
              <td colspan=4 valign=top style='padding:3.75pt 3.75pt 3.75pt 3.75pt'>
              <table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt'>
               <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
                <td valign=top style='padding:0in 0in 15.0pt 0in'>
                <table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt'>
                 <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
                  <td width=145 valign=top style='width:108.75pt;padding:0in 0in 0in 0in'>
                  <table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 0in 0in 0in'>
                   <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
                    <td width=10 valign=top style='width:7.5pt;padding:0in 0in 0in 0in'>
                    <p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>&nbsp;<o:p></o:p></span></p>
                    </td>
                    <td width=125 valign=top style='width:93.75pt;padding:0in 0in 0in 0in'>
                    <p class=MsoNormal style='line-height:93.75pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'><img border=0 width=125 id="_x0000_i1026" src="product_img_link_here" style='-ms-interpolation-mode: bicubic;display:block;height:125px;width:125px' alt="Fox Racing V2 Overseer Helmet"><o:p></o:p></span></p>
                    </td>
                    <td width=10 valign=top style='width:7.5pt;padding:0in 0in 0in 0in'>
                    <p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>&nbsp;<o:p></o:p></span></p>
                    </td>
                   </tr>
                  </table>
                  </td>
                  <td width=5 valign=top style='width:3.75pt;padding:0in 0in 0in 0in'><p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>&nbsp;<o:p></o:p></span></p>
                  </td>
                  <td valign=top style='padding:0in 0in 0in 0in'>
                  <table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt'>
                   <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
                    <td valign=top style='padding:0in 0in 0in 0in'>
                    <table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 0in 0in 0in'>
                     <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes'>
                      <td valign=top style='padding:0in 0in 0in 0in'>
                      <p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Item Number:&nbsp;&nbsp;07120-001-XS<o:p></o:p></span></p>
                      </td>
                     </tr>
                     <tr style='mso-yfti-irow:1'>
                      <td valign=top style='padding:0in 0in 0in 0in'>
                      <p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Color:&nbsp;&nbsp;Black<o:p></o:p></span></p>
                      </td>
                     </tr>
                     <tr style='mso-yfti-irow:2'>
                      <td valign=top style='padding:0in 0in 0in 0in'>
                      <p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Size:&nbsp;&nbsp;XS<o:p></o:p></span></p>
                      </td>
                     </tr>
                     <tr style='mso-yfti-irow:3'>
                      <td valign=top style='padding:0in 0in 0in 0in'>
                      <p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Price:&nbsp;&nbsp;<span class=price>$179.97</span> <o:p></o:p></span></p>
                      </td>
                     </tr>
                     <tr style='mso-yfti-irow:4;mso-yfti-lastrow:yes'>
                      <td valign=top style='padding:0in 0in 0in 0in'>
                      <p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Quantity:&nbsp;&nbsp;1<o:p></o:p></span></p>
                      </td>
                     </tr>
                    </table>
                    </td>
                   </tr>
                  </table>
                  </td>
                 </tr>
                </table>
                </td>
               </tr>
              </table>
              </td>
             </tr>
            </table>
            </td>
            <td width=10 valign=top style='width:7.5pt;padding:0in 0in 0in 0in'>
            <p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>&nbsp;<o:p></o:p></span></p>
            </td>
           </tr>
          </table>
          </div>
          <p class=MsoNormal align=center style='text-align:center'><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman";display:none;mso-hide:all'><o:p>&nbsp;</o:p></span></p>
          </td>
         </tr>
        </table>
        </td>
       </tr>
      </table>
      </td>
     </tr>
    </table>
    </div>
    <p class=MsoNormal align=center style='text-align:center'><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman";display:none;mso-hide:all'><o:p>&nbsp;</o:p></span></p>
    </td>
   </tr>
  </table>
  </div>
  </td>
 </tr>
</table>
</div>
</body>
</html>

答案 1 :(得分:0)

我用更新后的代码进行了Litmus测试,图像仍然按预期显示。

如果您仍然遇到问题,我建议的一种解决方法是将""包装在您的值周围。例如,代替这个(行:289):

<div class=WordSection1>
  <table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 style='border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt; border-spacing:0px;word-break:break-word'>

尝试一下:

<div class="WordSection1">
  <table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" 
  style="border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt; 
  border-spacing:0px;word-break:break-word">

在HTML代码方面,Outlook非常出众。这可能就是您遇到问题的原因。

祝你好运。

答案 2 :(得分:0)

我发现我遇到问题的原因是由于将包含图像的元素设置为mso-line-height-rule: exactly并在图像本身上指定了行高。当我将这些元素重置为mso-line-height-rule: at-least并从显示的行高度中正确删除行高时。

解决这个问题的一个方便技巧是使用Outlook将电子邮件另存为html-但随后使用Word打开html文件。这会像在Outlook中一样显示电子邮件,但是您可以使用elements属性来查看需要进行哪些更改以使其看起来像您想要的。