microsoft - if mso html
La altura de línea no funciona en Outlook 2010 para el correo electrónico HTML (6)
Outlook 2010 / Outlook 2007 no parece respetar la altura de línea en absoluto en mi correo electrónico HTML. (Funciona perfectamente en Outlook 00 y Outlook 03)
He estado haciendo una extensa búsqueda en Google, y los gráficos de soporte de HTML CSS que he encontrado dicen que Outlook 2010/2007 DEBERÍA entender la altura de la línea.
Intenté poner la altura de línea en el elemento padre del bloque, y el elemento de párrafo secundario, y como en una ID en la etiqueta de estilo en el encabezado, y cada combinación de las anteriores.
También me he asegurado de declarar explícitamente la altura de línea como un valor de píxel que es significativamente mayor que el tamaño del texto (pero probé% y em también). Traté de poner! Importante en la declaración, e incluso probé Valign junto con cualquier otro consejo que pude encontrar en línea ... He estado usando la altura de línea para, por ejemplo, determinar el relleno del botón y el relleno desde el HTML. / margin es muy defectuoso.
Realmente agradecería cualquier ayuda con esto. Realmente en el punto de golpear la cabeza ahora!
El correo electrónico es enorme, ya que es un boletín informativo complicado, pero aquí hay un fragmento del estilo en la cabeza y una sección de la tabla en la que la altura de la línea no está funcionando. ¡Espero que sea suficiente !:
<style type="text/css" media="screen">
html {
-webkit-text-size-adjust:none;
-webkit-background-size:100%;
}
body{
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
margin-bottom:0px !important;
margin-top:0px !important;
background-color:#e5e5e5;
}
p{
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
margin-bottom:0px !important;
margin-top:0px !important;
display:block;
}
a:link, a:visited, a:active{
color:#55c2d9;
text-decoration: underline;
}
a:hover{
text-decoration: underline;
}
.body a:link, a:visited, a:active{
color:#55c2d9;
}
img{
border: 0;
display: block;
}
table.main {
background-color: #ffffff;
width:650px;
}
td {
}
#header-top p{
line-height:33px;
}
</style>
<!-- Content -->
<table border="0" cellspacing="0" cellpadding="0" class="body">
<!-- Row 1 -->
<tr valign="top">
<td background="images/bg-texture-top.jpg" style="background-repeat:repeat-y; background-color:#262626;" valign="top" width="650" height="33" bgcolor="#262626">
<table border="0" cellspacing="0" cellpadding="0" id="header-top">
<!-- Row 1.1 -->
<tr valign="top">
<td style="" valign="top" width="16" height="" bgcolor="">
</td>
<td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" width="490" height="33" bgcolor="">
<p><a href="#">click here to view this email in a browser</a></p>
</td>
<td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" width="62" height="33" bgcolor="">
<p>find us on:</p>
</td>
<td style="" valign="top" width="16" height="" bgcolor="">
</td>
</tr>
</table>
</td>
</tr>
</table> <!-- Content -->
Establecer la line-height usando css en línea en la celda de la tabla debería estar bien, pero realmente no necesita esas etiquetas <p> , eso solo introduce problemas de formateo y las referencias a esas etiquetas <p> en el <style> etiquetas en <head> serán ignoradas por varios clientes.
Outlook admite la altura de línea especificada en porcentajes. Por ejemplo, line-height: 1.1 no es compatible, pero line-height: 110% is.
Outlook usa la palabra procesador html para representar y editar html. Acostúmbrate a los diseños de la mesa y olvídate de CSS, y si ... usa solo css en línea. tienes solo algunas posibilidades: fondo, familia de fuentes, tamaño de fuente, color.
una lista completa de css compatibles se puede encontrar here , here un tutorial.
Pero también debes pensar en tus receptores: si están en google mail o tu correo electrónico, tu CSS puede ser eliminado por completo.
un buen recurso para desarrollar boletines informativos por correo electrónico es campaignmonitor.com/resources, también están haciendo una verificación repetida de todos los servicios de correo electrónico y sus características HTML / CSS.
Para que la altura de línea funcione en Outlook, después de agregar "mso-line-height-rule: exactamente;" antes de la altura de la línea, asegúrese de usar porcentaje en lugar de valor decimal (es decir, 150% en lugar de 1.5)
Respuesta tardía, pero como recientemente trabajé en Outlook con un problema de altura de línea similar, quería compartir mi solución hacky.
Por alguna razón, si lanza una lista desordenada al código HTML justo antes de la etiqueta CLOSING de la etiqueta para la que ha especificado la altura de la línea, Outlook 2010 respeta la altura de la línea.
Puede hacer que la lista desordenada esté vacía e invisible:
<ul style="list-style-type: none; visibility:hidden;"></ul>
Ejemplo:
<p style="font-size: 12px; line-height: 18px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul style="list-style-type: none; visibility:hidden;"></ul>
</p>
Descargo de responsabilidad: no he probado esto exhaustivamente. Funciona en mi plantilla a través de un ESP en Outlook 2010, la versión actual de Gmail (27 de julio de 2012) y la aplicación de correo electrónico de iPhone. No sé si el truco soluciona universalmente el problema de altura de línea en otras etiquetas. También reconozco que es una solución apresurada, pero es un problema arduo; y, como suele ser el caso con la flagrante falta de respeto por las especificaciones de HTML de Outlook, la solución suele ser tan estúpida como el problema. Úselo si lo desea, pero pruébelo exhaustivamente antes de enviarlo a los destinatarios reales.
Uso una combinación de CSS en línea para controlar la altura de la línea:
<p style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:110%;font-size:11pt;">paragraph text</p>
El elemento clave es el atributo CSS propietario de Microsoft, mso-line-height-rule: exactly; . El relleno solo evita que las etiquetas de párrafo creen espacio innecesario.