2017-09-14 4 views
1

J'ai un problème avec Outlook (surprise) et j'ai une image d'arrière-plan dans une cellule de tableau. Maintenant, le problème est que je peux obtenir de travailler dans 99% des versions d'Outlook, sauf cependant, la version de bureau de 2016 en cours d'exécution sur Windows 10.Comportement de l'image d'arrière-plan des cellules dans Outlook

Voici le code pour le bloc:

<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> 

et qui produira ce résultat: 2016 Desktop

Cependant, il tue les autres versions: All other versions

Si je réduis la largeur VML vient m 1280px à ce qu'il devrait être (640px) il corrige toutes les autres versions, mais, me donne seulement une demi-image dans le client de bureau (essentiellement le contraire polaire). Maintenant, je comprends que ce client de bureau est probablement rendu à une DPI/résolution plus élevée, alors pourquoi doubler la largeur me donne le résultat correct et la largeur réelle me donne une demi-cellule.

Ma question est la suivante: y a-t-il un travail en boucle/hack qui me permettra d'afficher à double largeur dans ce client et les autres ignoreront cette règle?

Toute aide serait appréciée car je ne trouve pas une once d'information partout, merci d'avance.

+0

Peut-être que [cette question] (https: // stackoverflow.com/questions/27912189/outlook-ignores-largeur-attribut-ou-css-propriété) est lié: Il semble y avoir un problème avec la largeur des éléments avec outlook en général, et la solution était d'omettre les citations et d'écrire quelque chose comme 'width = 640' au lieu de' width = "640" '. –

+0

Malheureusement, bien que cela semble similaire, je peux obtenir la cellule et l'image pour travailler dans toutes les autres versions d'Outlook. Seulement dans le client Windows 10 Outlook semble-t-il casser et il peut avoir quelque chose à voir avec DPI de l'écran éventuellement. – Brad

+0

Si vous essayez d'ajouter des instructions conditionnelles, vous pourrez peut-être le faire fonctionner. Un bloc de code pour moins de perspectives 2010 un pour Outlook 2010 et un pour le reste des clients de messagerie. Faites-moi savoir si vous voulez un exemple de comment cela peut être fait. – Syfer

Répondre

0

Après une semaine de chasse, je suis tombé sur cet article qui traite de la question que je faisais:

Solving DPI scaling issues with HTML email in Outlook

Il était très clair pourquoi il se casse et comment contrer donc je recommande fortement vérifier pour bien comprendre le problème.


Toutefois, si vous êtes pressé et que vous voulez juste le code pour une solution rapide, vous devez insérer le code suivant dans la balise HTML de votre modèle:

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

cela indique à Outlook à quoi vous attendre Vous devrez ensuite insérer ce code dans la section HEAD de votre modèle juste avant la fin:

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

et enfin, comme avant (voir question initiale), vous aurez besoin de dire la cellule exactement ce qu'il doit faire quelque chose de similaire à:

<!--[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"> 

De toute évidence, comme tweak vous avez besoin de vos propres emails, mais cela a fonctionné pour moi. J'espère que cette réponse aidera les autres car elle m'a aidé quand elle se résume à l'échelle de DPI sur les machines plus récentes avec des moniteurs de plus haute résolution!

Marquez la mention "James" pour cette solution.