2015-11-27 77 views
0

OfficeOfficeOnAcid代碼分析表示不支持背景圖像,以簡寫(background: url("foo.png");)或顯式(background-image: url("foo.png");)格式,並且不支持背景屬性TD元素。除了這些樣式之外,我還有VML代碼定位到[if gte mso 9]辦公室365電子郵件背景圖像/漸變或VML瓷磚/漸變

在我的一些測試中,我看到了我的背景圖像,但沒有從圖像/ VML切換到線性漸變/ VML漸變。這是Office 365最近添加某種圖像支持的問題,還是Office 365中不支持VML漸變?

電子郵件碼與圖像:(注:具有用於附加圖像cid引用這裏示出;測試結果大多使用託管在imgr.com的圖像)

<head> 
    <style> 
    table.with-bg { 
     width: 570px; 
     min-height: 717px; 
    } 

    table.with-bg td.image-container { 
     padding: 10px; 
     background: url("cid:mailing_footer") repeat-x; 
    } 
    </style> 
</head> 

<body link="#497cbe" vlink="#497cbe" alink="#497cbe"> 
    <table class="with-bg" cellpadding="10" cellspacing="0" border="0" width="570" height="717"> 
    <tbody> 
     <tr> 
     <td class="image-container" background="cid:mailing_footer" bgcolor="transparent" valign="top" width="570" height="717"> 
      <!--[if gte mso 9]> 
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:570px;height:717px;"> 
      <v:fill type="tile" src="cid:mailing_footer" color="#ffffff" /> 
      <v:textbox inset="0,0,0,0"> 
      <![endif]--> 
      <div> 
      <table cellpadding="0" cellspacing="0" border="0" width="570" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> 
       <tbody> 
       <tr> 
        <td width="10">&nbsp;</td> 
        <td> 
        <table cellpadding="0" cellspacing="0" border="0" width="550"> 
         <tbody> 
         <tr> 
          <td colspan="2" align="left" bgcolor="transparent"> 
          &nbsp; 
          </td> 
         </tr> 
         <tr> 
         <td colspan="2" align="center" bgcolor="transparent"><img id="headerpic" src="cid:mailing_header" width="468" height="71" alt=" " title=" " style="width:468px; height: 71px;"></td> 
         </tr> 
         <tr> 
          <td colspan="2" class="body" style="min-height:200px;"> 
          CONTENT GOES HERE 
          </td> 
         </tr> 
         </tbody> 
        </table> 
        </td> 
        <td width="10">&nbsp;</td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
      <!--[if gte mso 9]> 
      </v:textbox> 
      </v:rect> 
      <![endif]--> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</body> 

改變梯度:

<head> 
    <style> 
    ... 

    table.with-bg td.image-container { 
     padding: 10px; 
     background-color: white; 
     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); 
    } 
    </style> 
</head> 
<body link="#497cbe" vlink="#497cbe" alink="#497cbe"> 
    ... 
     <td class="image-container" background="linear-gradient(#b6cae8, white);" bgcolor="transparent" valign="top" width="570" style="background-color: white; 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:570px;"> 
      <v:fill type="gradient" color="#ffffff" color2="#b6cae8" /> 
      <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> 
      <![endif]--> 
    ... 
</body> 

回答

0

此外,他們還直接將此提交給了Email On Acid,他們迴應說Office 365似乎增加了對TD backgro的支持und屬性,他們更新了代碼分析以反映這一點。

目前似乎不支持漸變,CID圖像路徑也不支持。圖像的絕對URL可用,例如<td background="http://foo.com/bar.jpg">。當通過ZIP文件上傳在EOA上運行手動測試時,相對路徑也起作用(<td background="bar.jpg">),但我不清楚在通常發送的電子郵件中是否/如何工作。

注意: Office 365和OWA不使用VML,更重要的是,它們不匹配mso條件註釋!