Sobre este problema de CSS
Estas propriedades com prefixo mso- são mais comumente introduzidas quando o conteúdo é copiado e colado do Microsoft Word ou outras aplicações do Office para um editor HTML. O Microsoft Office gera HTML altamente estilizado com dezenas de propriedades CSS proprietárias concebidas para preservar a formatação do documento quando renderizado novamente em produtos Office. Embora os navegadores ignorem silenciosamente estas propriedades desconhecidas, elas poluem a sua marcação, inflacionam o tamanho do ficheiro e violam os padrões web.
Isto é um problema por várias razões. Primeiro, estas propriedades não têm efeito em nenhum navegador web — são puramente artefactos do motor de renderização interno da Microsoft. Segundo, inflacionam significativamente o seu HTML, às vezes duplicando ou triplicando o tamanho da marcação. Terceiro, tornam o seu código mais difícil de ler e manter. Quarto, podem causar problemas com ferramentas automatizadas, linters e sistemas de gestão de conteúdo que esperam CSS válido. Finalmente, no contexto do desenvolvimento de HTML email, embora as propriedades mso- sejam por vezes intencionalmente usadas para visar o motor de renderização do Microsoft Outlook, elas não devem aparecer em páginas web destinadas a navegadores.
Como corrigir
- Identifique a fonte. Verifique se o conteúdo foi colado do Microsoft Word ou outra aplicação Office. Esta é a origem mais comum.
-
Remova todas as propriedades
mso-. Elimine todas as declarações CSS que começam commso-. Elas não servem nenhum propósito num contexto de navegador. -
Substitua por CSS padrão se necessário. Algumas propriedades
mso-têm equivalentes CSS padrão. Por exemplo,mso-margin-top-altpode ser substituído pormargin-top, emso-bidi-font-weightpode ser substituído porfont-weight. - Use um fluxo de trabalho de colar-como-texto-simples. Ao copiar do Word, cole primeiro como texto simples (Ctrl+Shift+V em muitos editores), depois aplique a formatação usando o seu próprio CSS.
Exemplos
❌ Incorreto: HTML com propriedades do 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 foi colado do 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>
✅ Correto: HTML limpo com apenas CSS padrão
<p style="margin-bottom: 0; margin-top: auto; font-weight: bold; line-height: normal;">
Este texto foi colado do Microsoft Word.
</p>
<style>
.content {
font-family: Arial, sans-serif;
line-height: 1.5;
}
</style>
Propriedades mso- comuns e as suas substituições padrão
Propriedade mso- |
Equivalente CSS Padrão |
|---|---|
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 (use uma pilha de fontes padrão) |
mso-line-height-rule |
Nenhum equivalente necessário — remova-a |
mso-spacerun |
Nenhum equivalente necessário — remova-a |
mso-tab-count |
Nenhum equivalente necessário — remova-a |
Muitas propriedades mso- (como mso-spacerun e mso-tab-count) controlam comportamentos específicos do motor de renderização da Microsoft e não têm nenhum equivalente CSS. Estas podem simplesmente ser eliminadas sem qualquer substituição. Se o seu conteúdo originalmente veio do Word, é frequentemente melhor remover toda a formatação e reestilizar o conteúdo do zero usando o seu próprio CSS limpo.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.