Pregunta

Tengo un correo electrónico HTML que funciona correctamente en todos los clientes excepto Outlook 2003, donde los enlaces tienen subrayados (incluso con text-decoration: none;) y el font-size cambia a ser más pequeñas.

Fragmento de código:

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

El enlace de ejemplo:

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

Y esto font-size cambios en torno a 11 o 12 píxeles.

¿Alguna idea?

¿Fue útil?

Solución

La porción de marcado en el código allí. Sólo traté de cómo se ve marcado de Outlook 2010 al enviar el correo electrónico - porque tener enlaces sin subrayado funciona sin problemas al enviar mensajes a Outlook 2003. Sin más preámbulos:

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

Lo importante tener en cuenta: Se pone una span en el enlace para el peinado. Sin el uso de ningún tipo <font>.

Outlook tiene la buena "función" autocompletar a los hipervínculos - Aparentemente, este es sólo para el texto que escribe, pero podría ser digno de un tiro, tal vez los clientes están autocompletar sus enlaces que subrayar? (En realidad sólo una suposición). Hay una revisión a su vez de autocompletar enlaces aquí (uno todavía tiene que jugar en el registro y crear un DisableAutoUrlCompletion DWORD denominado en HKEY_CURRENT_USER\Software\Microsoft\Office\11.0\Outlook\Preferences).

Sólo por completo aquí el cuerpo del correo electrónico completa de un muy simple correo electrónico enviado con Outlook 2010 muestra sin problemas en Outlook 2003 (el mismo tamaño de fuente, no subrayado - de todos modos). [Tenga en cuenta - mucho de la de Microsoft "basura" de allí que no es realmente necesario, como estilos Calibri a pesar de que se utilizó Arial]

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

Otros consejos

@Neurofluxation: Try -

Para el extracto:

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

Para el enlace:

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

Esto es también una guía útil para soporte de CSS a través de una multitud de clientes de correo electrónico: http: // www. campaignmonitor.com/css/

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top