Verificação HTML: CSS: "left": O caractere n não é nem um dígito decimal, ponto decimal, nem marca exponencial da notação "e".

Sobre este problema HTML

O validador W3C analisa valores de CSS inline caractere por caractere. Quando encontra um valor numérico para a propriedade left, espera que os caracteres que se seguem sejam parte de um número válido (dígitos, um ponto decimal, ou e para notação científica) ou uma unidade CSS reconhecida. Se em vez disso encontrar uma letra inesperada como n, gera este erro. Isto pode acontecer de várias formas:

Unidades em falta: Escrever left: 10; em vez de left: 10px;. A especificação CSS exige uma unidade para todos os valores de comprimento não nulos. Embora alguns browsers possam interpretar números sem unidade em modo quirks, isto é CSS inválido e produz resultados imprevisíveis entre browsers.
Erros de digitação nas unidades: Escrever algo como left: 10n; ou left: 10xp; onde a unidade pretendida era px mas um erro de digitação introduziu caracteres inválidos.
Artefactos de template ou script: Valores gerados dinamicamente como left: {{offset}}px; que não foram adequadamente resolvidos, deixando caracteres não numéricos no output.
Usar calc() incorretamente: Escrever left: 10 + 5px; em vez de left: calc(10px + 5px);.

A propriedade left aceita os seguintes tipos de valores:

Comprimentos: Um número seguido de uma unidade como px, em, rem, vw, vh, ch, etc. (por exemplo, left: 10px;)
Percentagens: Um número seguido de % (por exemplo, left: 50%;)
Palavras-chave: auto, inherit, initial, unset, ou revert
Funções: calc(), min(), max(), clamp(), etc.
Zero: O valor 0 é o único número que não requer uma unidade.

CSS inválido não apenas desencadeia erros de validação mas pode causar problemas de layout. Os browsers podem ignorar toda a declaração, recorrendo ao valor predefinido, o que pode quebrar o seu posicionamento pretendido. Assegurar CSS válido melhora a consistência entre browsers e a manutenibilidade.

Exemplos

Unidade em falta (desencadeia o erro)

<div style="position: absolute; left: 10;">
  Elemento posicionado
</div>

O validador lê 10 e depois encontra o ; (ou noutros casos uma letra perdida como n), que não é uma parte válida de um valor de comprimento CSS.

Erro de digitação na unidade (desencadeia o erro)

<div style="position: absolute; left: 10xn;">
  Elemento posicionado
</div>

Corrigido com uma unidade de comprimento válida

<div style="position: absolute; left: 10px;">
  Elemento posicionado
</div>

Corrigido com uma percentagem

<div style="position: absolute; left: 50%;">
  Elemento posicionado
</div>

Corrigido com a palavra-chave `auto`

<div style="position: absolute; left: auto;">
  Elemento posicionado
</div>

Corrigido com `calc()`

<div style="position: absolute; left: calc(50% - 20px);">
  Elemento posicionado
</div>

Zero sem uma unidade (válido)

<div style="position: absolute; left: 0;">
  Elemento posicionado
</div>

Verifique sempre duas vezes que cada valor numérico não nulo para left (e outras propriedades baseadas em comprimento como top, right, bottom, width, margin, etc.) inclui uma unidade CSS válida. Se estiver a gerar estilos dinamicamente, verifique que as variáveis de template se resolvem para valores adequados antes de renderizar.