2010-11-25 24 views
3

J'ai un email HTML qui fonctionne correctement dans chaque client sauf Outlook 2003, où les liens ont souligné (même avec text-decoration: none;) et les modifications font-size pour être plus petit.Outlook 2003 et Font-Sizes

Extrait du code:

<td valign="top" align="left" style="line-height: 31px; font-size: 31px;"> 
        <font face="Arial, Helvetica, sans-serif" size="3" color="#6b565d" style="line-height: 60px; font-size: 62px;"><strong>25% off</strong></font> 
</td> 

échantillon Lien:

<font face="Arial, Helvetica, sans-serif" size="3" color="#ffffff" style="line-height: 16px; font-size: 22px;"><a href="<squeeze.attribute.link.story01_text>" title="Book your sale room now" style="color: #ffffff; text-decoration: none; font-size:22px; background-color: #b50f18;"><font color="#ffffff"><strong>Mooo, I'm some text >></strong></font></a></font> 

Et ce font-size changements à environ 11 ou 12px.

Des idées?

Répondre

3

Lot de Markup dans votre code là. Je viens d'essayer la façon dont le balisage d'Outlook 2010 ressemble lors de l'envoi de courrier électronique - car avoir des liens sans soulignement fonctionne parfaitement lors de l'envoi des mails à Outlook 2003. Sans plus tarder:

<a href="http://example.org"> 
    <span style='text-decoration:none;'>My Link Text not underlined</span> 
</a> 

La chose importante à noter: Il met un span dans les le lien pour le style. Aucune utilisation de <font> que ce soit. Outlook a la belle "fonctionnalité" pour compléter automatiquement les liens hypertexte - AFAIK c'est seulement pour le texte que vous tapez, mais il pourrait être utile un coup de feu, peut-être que les clients autocomplètent vos liens pour être soulignés? (Vraiment juste deviner). Il y a un correctif pour activer des liens d'auto-complétion here (il faut encore vibrer dans le registre et créer un DWORD nommé DisableAutoUrlCompletion à HKEY_CURRENT_USER\Software\Microsoft\Office\11.0\Outlook\Preferences). Juste pour l'exhaustivité ici le corps complet de l'e-mail d'un courriel très simple envoyé avec Outlook 2010 montrant parfaitement dans Outlook 2003 (même taille de police, pas de soulignement - tout de même). [Gardez à l'esprit - beaucoup de "junk" de Microsoft là-bas qui n'est pas vraiment nécessaire, comme les styles de Calibri, même si Arial a été utilisé]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<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/1999/xhtml"> 
<head> 
    <meta name="Generator" content="Microsoft Word 14 (filtered medium)" /> 
    <style type="text/css"> 
/*<![CDATA[*/ 
    <!-- 
    /* Font Definitions */ 
    @font-face 
    {font-family:Calibri; 
    panose-1:2 15 5 2 2 2 4 3 2 4;} 
    /* Style Definitions */ 
    p.MsoNormal, li.MsoNormal, div.MsoNormal 
    {margin:0cm; 
    margin-bottom:.0001pt; 
    font-size:11.0pt; 
    font-family:"Calibri","sans-serif";} 
    a:link, span.MsoHyperlink 
    {mso-style-priority:99; 
    color:blue; 
    text-decoration:underline;} 
    a:visited, span.MsoHyperlinkFollowed 
    {mso-style-priority:99; 
    color:purple; 
    text-decoration:underline;} 
    span.EmailStyle17 
    {mso-style-type:personal-compose; 
    font-family:"Calibri","sans-serif"; 
    color:windowtext;} 
    .MsoChpDefault 
    {mso-style-type:export-only; 
    font-family:"Calibri","sans-serif";} 
    @page WordSection1 
    {size:612.0pt 792.0pt; 
    margin:70.85pt 70.85pt 2.0cm 70.85pt;} 
    div.WordSection1 
    {page:WordSection1;} 
    --> 
    /*]]>*/ 
    </style><!--[if gte mso 9]><xml> 
<o:shapedefaults v:ext="edit" spidmax="1026" /> 
</xml><![endif]--><!--[if gte mso 9]><xml> 
<o:shapelayout v:ext="edit"> 
<o:idmap v:ext="edit" data="1" /> 
</o:shapelayout></xml><![endif]--> 

    <title></title> 
</head> 

<body lang="EN-US" link="blue" vlink="purple" xml:lang="EN-US"> 
    <div class="WordSection1"> 
    <p class="MsoNormal"><span lang="DE" style= 
    'font-size:14.0pt;font-family:"Arial","sans-serif";color:black' xml:lang= 
    "DE"><a href="http://example.org/"><span style= 
    'color:black;text-decoration:none'>test</span></a></span></p> 
    </div> 
</body> 
</html> 
0

@Neurofluxation: Essayez -

Pour l'extrait:

<td valign="top" align="left"> 
    <span style="color: #6b565d; font-size: 62px; line-height: 60px;"><strong>25% off</strong></span> 
</td> 

Pour le lien:

<a href="<squeeze.attribute.link.story01_text>" title="Book your sale room now" style="background-color: #b50f18; color: #ffffff; font-size: 22px; line-height: 16px; text-decoration: none;"><strong>Mooo, I'm some text &gt;&gt;</strong></a> 

est ici aussi un guide pratique pour le soutien CSS à travers une multitude d'e clients de messagerie: http://www.campaignmonitor.com/css/