Acerca de este problema de CSS
Estas propiedades con prefijo mso- se introducen más comúnmente cuando se copia y pega contenido desde Microsoft Word u otras aplicaciones de Office en un editor HTML. Microsoft Office genera HTML con muchos estilos que incluye docenas de propiedades CSS propietarias diseñadas para preservar el formato del documento cuando se renderiza nuevamente en productos de Office. Aunque los navegadores ignoran silenciosamente estas propiedades desconocidas, ensucian tu marcado, inflan el tamaño del archivo y violan los estándares web.
Esto es problemático por varias razones. Primero, estas propiedades no tienen efecto en ningún navegador web: son únicamente artefactos del motor de renderizado interno de Microsoft. Segundo, inflan significativamente tu HTML, a veces duplicando o triplicando el tamaño del marcado. Tercero, hacen que tu código sea más difícil de leer y mantener. Cuarto, pueden causar problemas con herramientas automatizadas, linters y sistemas de gestión de contenido que esperan CSS válido. Finalmente, en el contexto del desarrollo de email HTML, aunque las propiedades mso- a veces se usan intencionalmente para dirigirse al motor de renderizado de Microsoft Outlook, no deberían aparecer en páginas web destinadas a navegadores.
Cómo solucionarlo
- Identifica la fuente. Verifica si el contenido fue pegado desde Microsoft Word u otra aplicación de Office. Este es el origen más común.
-
Elimina todas las propiedades
mso-. Borra cada declaración CSS que comience conmso-. No tienen propósito alguno en el contexto de un navegador. -
Reemplaza con CSS estándar si es necesario. Algunas propiedades
mso-tienen equivalentes CSS estándar. Por ejemplo,mso-margin-top-altse puede reemplazar conmargin-top, ymso-bidi-font-weightse puede reemplazar confont-weight. - Usa un flujo de trabajo de pegar como texto plano. Al copiar desde Word, primero pega como texto plano (Ctrl+Shift+V en muchos editores), luego aplica formato usando tu propio CSS.
Ejemplos
❌ Incorrecto: HTML con propiedades de Microsoft Office
<p style="mso-spacerun: yes; mso-fareast-font-family: 'Times New Roman'; margin-bottom: .0001pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; mso-bidi-font-weight: bold; line-height: normal;">
Este texto fue pegado desde Microsoft Word.
</p>
<style>
.content {
mso-fareast-font-family: "Calibri";
mso-bidi-font-family: "Times New Roman";
font-family: Arial, sans-serif;
mso-line-height-rule: exactly;
line-height: 1.5;
}
</style>
✅ Correcto: HTML limpio con solo CSS estándar
<p style="margin-bottom: 0; margin-top: auto; font-weight: bold; line-height: normal;">
Este texto fue pegado desde Microsoft Word.
</p>
<style>
.content {
font-family: Arial, sans-serif;
line-height: 1.5;
}
</style>
Propiedades mso- comunes y sus reemplazos estándar
Propiedad mso- |
Equivalente CSS estándar |
|---|---|
mso-margin-top-alt |
margin-top |
mso-margin-bottom-alt |
margin-bottom |
mso-bidi-font-weight |
font-weight |
mso-bidi-font-style |
font-style |
mso-bidi-font-size |
font-size |
mso-fareast-font-family |
font-family (usa una pila de fuentes estándar) |
mso-line-height-rule |
No se necesita equivalente — elimínala |
mso-spacerun |
No se necesita equivalente — elimínala |
mso-tab-count |
No se necesita equivalente — elimínala |
Muchas propiedades mso- (como mso-spacerun y mso-tab-count) controlan comportamientos específicos del motor de renderizado de Microsoft y no tienen equivalente CSS alguno. Estas se pueden simplemente borrar sin ningún reemplazo. Si tu contenido originalmente provino de Word, a menudo es mejor eliminar todo el formato y volver a aplicar estilos al contenido desde cero usando tu propio CSS limpio.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.