Guias HTML para mso

These mso- prefixed properties are most commonly introduced when content is copied and pasted from Microsoft Word or other Office applications into an HTML editor. Microsoft Office generates heavily styled HTML with dozens of proprietary CSS properties designed to preserve the document’s formatting when rendered back in Office products. While browsers silently ignore these unknown properties, they clutter your markup, inflate file size, and violate web standards.

This is a problem for several reasons. First, these properties have no effect in any web browser — they are purely artifacts of Microsoft’s internal rendering engine. Second, they significantly bloat your HTML, sometimes doubling or tripling the size of the markup. Third, they make your code harder to read and maintain. Fourth, they can cause issues with automated tools, linters, and content management systems that expect valid CSS. Finally, in the context of HTML email development, while mso- properties are sometimes intentionally used to target Microsoft Outlook’s rendering engine, they should not appear in web pages intended for browsers.

How to Fix

1. Identify the source. Check if the content was pasted from Microsoft Word or another Office application. This is the most common origin.
2. Remove all mso- properties. Delete every CSS declaration that starts with mso-. They serve no purpose in a browser context.
3. Replace with standard CSS if needed. Some mso- properties have standard CSS equivalents. For example, mso-margin-top-alt can be replaced with margin-top, and mso-bidi-font-weight can be replaced with font-weight.
4. Use a paste-as-plain-text workflow. When copying from Word, paste as plain text first (Ctrl+Shift+V in many editors), then apply formatting using your own CSS.

Examples

❌ Incorrect: HTML with Microsoft Office properties

<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;">
  This text was pasted from 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>

✅ Correct: Cleaned-up HTML with only standard CSS

<p style="margin-bottom: 0; margin-top: auto; font-weight: bold; line-height: normal;">
  This text was pasted from Microsoft Word.
</p>

<style>
  .content {
    font-family: Arial, sans-serif;
    line-height: 1.5;
  }
</style>

Common mso- properties and their standard replacements

Many mso- properties (like mso-spacerun and mso-tab-count) control behaviors specific to Microsoft’s rendering engine and have no CSS equivalent at all. These can simply be deleted without any replacement. If your content originally came from Word, it’s often best to strip all formatting and restyle the content from scratch using your own clean CSS.