Outlook中的單元格背景圖像行爲

我遇到Outlook（意外）問題，並在表格單元格中有背景圖像。現在的問題是，我可以得到它的Outlook版本的99％，除了工作然而，在Windows 10Outlook中的單元格背景圖像行爲

這裏運行2016桌面版本是塊代碼：

<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="w-full" style="vertical-align:top; width: 640px;" width="640"> 
<tr> 
    <td class="w-full" background="http://via.placeholder.com/640x320" bgcolor="#7bceeb" width="640" valign="top"> 
      <!--[if gte mso 9]> 
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:1280px;"> 
<v:fill type="tile" src="http://via.placeholder.com/640x320" color="#ffffff" /> 
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> 
<![endif]--> 
      <div> 
       <table align="" border="0" cellpadding="0" cellspacing="0" class="w-full" style="vertical-align:top;" width="640"> 
        <tr> 
         <td valign="top"> 
          <table border="0" cellpadding="0" cellspacing="0" class="w-full" width="640"> 
           <tr> 
            <td height="35" style="text-align: center;"> </td> 
           </tr> 
           <tr> 
            <td align="center" style="color:#FFFFFF; font-size:24px;"> 
             <div style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #ffffff; text-transform: uppercase;"> <font face="'Century Gothic', Helvetica, Arial, sans-serif"><span style="font-size:44px;">Lorem Ipsum</span><br> 
             <br> 
             <span style="font-size:24px;">SOME TEXT HERE<br> 
             with a page break here</span></font> 
              <br> 
              <br> &nbsp;</div> 
             <table align="center" border="0" cellpadding="0" cellspacing="0"> 
              <tr> 
               <td align="center" style=" font-family:'Century Gothic', Helvetica, Arial, sans-serif; font-size:14px; color:#ffffff; text-transform: uppercase; font-weight: bold;"> <a href="#" style="color:#ffffff; text-decoration:none; padding:14px 30px; display:inline-block; border:solid 1px #ffffff;" target="_blank">CTA Text</a></td> 
              </tr> 
             </table> 
            </td> 
           </tr> 
           <tr> 
            <td height="35"> </td> 
           </tr> 
          </table> 
         </td> 
        </tr> 
       </table> 
      </div> 
      <!--[if gte mso 9]> 
</v:textbox> 
</v:rect> 
<![endif]--> 
     </td> 
</tr> 
</table>

和如果我減少VML寬度來回 All other versions

：會產生這樣的結果： 2016 Desktop

然而，它殺死其他版本m 1280px它應該是（640px）它修復了所有其他版本，但只給了我一半的桌面客戶端的圖像（基本上是極性相反）。

現在我的理解是，這個桌面客戶端可能會呈現更高的DPI /分辨率，因此，寬度加倍會給我正確的結果，而實際寬度會給我半個單元格。

我的問題是，是否有一個工作輪/黑客，可以讓我在該客戶端顯示雙倍寬度，並讓其他人忽略此規則？

任何幫助將不勝感激，因爲我無法找到任何地方的信息碎片，在此先感謝。

Solving DPI scaling issues with HTML email in Outlook

這是爲什麼它打破了非常明確的，以及如何對付它，所以我會強烈建議：

來源

2017-09-14 Brad

也許[這個問題]（https：// stackoverflow。com/questions/27912189/outlook-ignores-width-attribute-or-css-property）是相關的：通常在outlook中元素的寬度似乎存在問題，解決方案是省略引號並寫出類似'width = 640'而不是'width =「640」'。 –

不幸的是，雖然這看起來很相似，但我可以讓單元格和圖像在所有其他版本的Outlook中工作。只有在Windows 10 Outlook客戶端中，它似乎中斷了，它可能與屏幕的DPI有關。 – Brad

如果您嘗試添加前景條件語句，則可能可以使其工作。一個代碼塊的代碼少於Outlook 2010，其中一個代碼用於Outlook 2010，另一個代碼用於其他電子郵件客戶端。讓我知道你是否想要這樣做的例子。 – Syfer

狩獵的一個星期後，我碰到這個文章，解決我遇到的問題來了檢查它以完全理解問題。

但是，如果你是在趕時間，只是想速戰速決的代碼，你需要在插入下面的代碼到你的模板的的HTML標籤：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

這告訴Outlook會發生什麼然後您就需要插入此代碼到您的模板的HEAD部分之前收盤：

<Head> 
<!--[if gte mso 9]> 
    <xml> 
     <o:OfficeDocumentSettings> 
     <o:AllowPNG/> 
     <o:PixelsPerInch>96</o:PixelsPerInch> 
     </o:OfficeDocumentSettings> 
    </xml> 
<![endif]--> 
</Head>

最後，像以前一樣（見原題），你需要告訴細胞到底是什麼，它需要有類似的東西做的事：

<!--[if gte mso 9]> 
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;"> 
<v:fill type="tile" src="http://via.placeholder.com/640x320" color="#ffffff" /> 
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">

顯然，作爲調整你需要爲自己的電子郵件，但是，這爲我工作。我希望這個答案可以幫助其他人，因爲它可以幫助我解決具有更高分辨率顯示器的新機器的DPI縮放問題！

對此解決方案完全稱讚爲「James」。

來源

2017-09-15 13:39:09 Brad

Outlook中的單元格背景圖像行爲

回答

相關問題