correos electrónicos html problema de estilo

4 minutos de lectura

Avatar de usuario de El Toro Bauldo
El Toro Bauldo

Tengo un problema con los clientes de correo electrónico que revierten mi estilo <hr/> a uno con sólo una línea sólida.

El siguiente es mi marcado, se ve bien en Chrome e IE, pero Outlook siempre vuelve la línea punteada a una sólida.

<hr style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:0; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;" ></hr>

Miré Campaign Monitor pero nada en particular que me guíe allí.

Todas las respuestas apreciadas.

  • He vuelto a etiquetar Outlook, pero ¿es una versión particular de Outlook? ¿2007 en adelante, quizás?

    – Andrew Leach

    18 de abril de 2012 a las 9:24

  • todos los clientes de correo electrónico realmente, pero 2003 y 2007 son los que estoy viendo.

    – El Toro Bauldo

    18 de abril de 2012 a las 12:58

  • ¿Está Outlook siendo aún más malo que IE para los sitios web? ¿Y OUTLOOK 2013 es incluso peor que todas las versiones anteriores?

    – ben

    4 de julio de 2014 a las 10:09


Me imagino que se debe a que Outlook usa el motor de procesamiento de palabras de Microsoft, en lugar de un motor HTML, y una etiqueta de recursos humanos simplemente se revertiría a una línea continua como en msword.

Probablemente intentaría usar una tabla de ancho completo-> celda o div y estilo en lugar de usar una etiqueta hr.

<table>
<tr>
<td style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:1px; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;">&nbsp;</td>
</tr>
</table>

nbsp está allí en caso de que el motor de renderizado no reconozca las celdas vacías.

  • También me doy cuenta de que esta no es probablemente la forma más elegante de codificarlo.

    – kolín

    18 de abril de 2012 a las 9:27

  • Gracias Kolin, pero en realidad funciona. Había probado la misma técnica con un efecto limitado. He agregado la solución a continuación que, en sus propias palabras, es bastante poco elegante

    – El Toro Bauldo

    19 de abril de 2012 a las 7:55

  • No se moleste con la etiqueta hr a menos que desee los colores y márgenes predeterminados que usa Outlook/Word.

    – Trevorc

    23 mayo 2012 a las 17:26

  • Todos los que se quejan de la elegancia en html para los correos electrónicos no entienden que la codificación de los correos electrónicos no tiene nada que ver con el pensamiento computacional o matemático; también tiende a ponerse bastante feo.

    – stevek-pro

    31 de octubre de 2013 a las 2:37


  • Esto funcionó muy bien para mí después de establecer el borde, etc., en cero.

    ¡Gracias!

    – Ender2050

    6 de agosto de 2014 a las 2:49

    avatar de usuario de marc82ch
    marc82ch

    Basado en las otras respuestas, encontré que esto funciona mejor:

    <table border="0" width="100%" cellpadding="0" cellspacing="0">
      <tr>
        <td style="background:none; border-bottom: 1px solid #d7dfe3; height:1px; width:100%; margin:0px 0px 0px 0px;">&nbsp;</td>
      </tr>
    </table>
    <br>

    El ancho parece ser necesario en table en % o preferiblemente (según https://www.campaignmonitor.com/resources/will-it-work/guidelines/) ponerlo en px sobre el td si es posible.

    los border-bottom taquigrafía parece funcionar bien, donde el escritura común a mano las versiones como se menciona en la respuesta de kolin no están en Outlook.

    EDITAR: lo que encontré que usé anteriormente y también funciona, al menos en Outlook (sería bueno si alguien que pueda, pudiera probar eso en otros clientes), es un <hr>enfoque basado.

    <hr height="1" style="height:1px; border:0 none; color: #D7DFE3; background-color: #D7DFE3; margin-top:1.5em; margin-bottom:1.5em;">
    

    • El enfoque


      también funciona bien en el cliente web de GMail, así como en el último cliente de escritorio de Outlook a partir de 2020 (no estoy seguro del número de versión en estos días).

      – Martín Connel

      11/06/2020 a las 19:50

    Bastante poco elegante y solo útil para un ancho fijo conocido, pero descubro que estos son los terrores que te visitan cuando intentas corregir el formato en los correos electrónicos html.

    <p style="line-height:20%; color:#cccccc; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;">........................................................................................................................................</p>
    

    • No puedo creer que tenga que usar algo como esto para obtener bordes punteados en Outlook suspiro

      – DGibbs

      07/08/2013 a las 15:01

    • La etiqueta p no es fácil de controlar en todos los clientes de correo electrónico, y varios de ellos (outlook.com) no reconocen el margen/relleno en la etiqueta p, por lo que no sugiero usar esta solución.

      – jose1978

      29 de noviembre de 2016 a las 22:28

    • jajaja esto me hizo reír a carcajadas. bueno le doy un +1

      – toscano

      9 sep 2019 a las 20:37

    Puedes usar este ejemplo:

    <div style="border-top: 1px dotted #999999;">&nbsp;</div>
    

    Desafortunadamente, solo funcionará contra un fondo blanco.

    Necesita declarar un tamaño de fuente, de lo contrario, ” ” interfiere con la altura.

     <tr><td style="background:none; border-bottom: 4px solid #DC1431; height:1px; width:100%; margin:0px 0px 0px 0px; font-size: 1px">&nbsp;</td></tr> 
    

    ¿Ha sido útil esta solución?