Por qué tu correo HTML se ve mal en Outlook y qué ignora

Outlook clásico para Windows dibuja el correo HTML con el motor de renderizado de Microsoft Word, no con un navegador, y Word ignora gran parte del CSS moderno. La propia referencia de Microsoft incluye float, position, display, background-image, max-width y min-width como no admitidos, junto con formularios y scripts, y muestra los GIF animados como un primer cuadro fijo. Por eso una plantilla hecha con flexbox, divs con max-width o fondos CSS se ve bien en Gmail y se desarma en Outlook. La solución suele ser un diseño con tablas y anchos como atributos, no rehacer todo.

Fuentes, leídas el 2 de noviembre de 2026: Word 2007 HTML and CSS rendering capabilities in Outlook 2007 de Microsoft (archivada, pero sigue siendo el motor que usa Outlook clásico), las etapas de migración al nuevo Outlook para Windows de Microsoft (actualizada el 23 de febrero de 2026) y las tablas de compatibilidad de Can I email.

Qué Outlook es el problema

• Outlook clásico para Windows (la aplicación de escritorio de la mayoría de las oficinas): motor de Word. Aquí es donde se rompen las plantillas.
• Nuevo Outlook para Windows y Outlook en la web: motor de navegador, mucho más parecido a Gmail.
• Outlook para Mac, iOS y Android: también usan motores basados en navegador.

Microsoft dice que el nuevo Outlook sigue en la etapa de adopción voluntaria y que las instalaciones existentes de Outlook clásico tendrán soporte hasta al menos 2029. Si envías a bandejas de empresas, asume que una parte de tus lectores verá la versión de Word durante años.

Qué ignora Outlook clásico

De la lista de CSS y HTML no admitidos de Microsoft, estos son los que más rompen los correos:

Lo que usaste	Qué pasa en Outlook clásico	Qué usar en su lugar
display: flex o grid	Se ignora; las columnas se apilan o se colapsan	Columnas de tabla, un td por columna
max-width en un div	Se ignora; el div ocupa todo el ancho	Una tabla con width=600
float, position	Se ignoran	Celdas de tabla con align
background-image en CSS	No se muestra	bgcolor de respaldo, o VML en comentarios condicionales
Ancho solo en CSS en las imágenes	La imagen se ve con el tamaño real del archivo	Atributo width en cada img
GIF animado	Solo el primer cuadro	Pon el mensaje en el primer cuadro
Formularios, botones, scripts	No se admiten	Enlaza a una página web

Otras dos causas comunes no tienen nada que ver con CSS: un td o tr sin cerrar (Outlook perdona menos que un navegador) y el padding en div o p, al que Word le da márgenes pero no padding (el padding solo está en su grupo de compatibilidad completa, que incluye td). Pon el padding en el td.

Cómo arreglar una plantilla que se rompe

1. Pega el HTML en el revisor de correo HTML. Marca flex y grid, variables CSS, imágenes de fondo sin código para Outlook, position, etiquetas de tabla sin cerrar e imágenes sin ancho, e indica si el archivo ya tiene comentarios condicionales para Outlook.
2. Envuelve el cuerpo en una tabla de 600px con el ancho como atributo, centrada con align=center.
3. Rehaz las columnas como celdas de tabla. Para que se apilen en el teléfono, conserva las celdas y usa una media query en el head; Outlook ignora la consulta y mantiene las columnas.
4. Agrega atributos width a las imágenes y ponles display:block para quitar el pequeño espacio que algunos clientes agregan debajo de una imagen.
5. Pasa los estilos a línea con el inliner de CSS para correo para que sobrevivan en los clientes que descartan los estilos del head.
6. Usa comentarios condicionales para lo demás. El código dentro de un comentario if mso solo lo lee Outlook clásico, y ahí es donde van los anchos fijos y los fondos VML.
7. Haz un envío de prueba a una bandeja de Outlook clásico para Windows, además de Gmail y Apple Mail. Un revisor lee código; solo un cliente real muestra el resultado.

Un diseño roto no es lo mismo que correo no deseado

Una plantilla que se ve mal en Outlook llega igual a donde habría llegado. Si Outlook está mandando tu correo a Correo no deseado, las causas son la autenticación, la reputación y las quejas, no el CSS; consulta correos que van a no deseado en Outlook y los requisitos de remitente de Microsoft.

Dónde encaja SimpleVerifier

El revisor es gratis y funciona en tu navegador. Antes de enviar, revisa la lista misma: súbela en la página de verificación, y las primeras 100 comprobaciones son gratis al iniciar sesión con Google. Pro cuesta $39 al mes: los primeros 100.000 correos de cada mes van a máxima velocidad y después las listas grandes avanzan más despacio, sin cortes. Consulta los precios.