Recursos CSS não suportados e soluções alternativas

Em resumo

O motor writeHtml renderiza o conteúdo em uma única passagem sequencial e nunca refaz o layout do conteúdo anterior. Alguns comportamentos de Cascading Style Sheets (CSS) não se encaixam nesse modelo. Esta página lista os comportamentos específicos que o motor não aplica e apresenta uma solução alternativa suportada para cada um deles. Para ver o status de verificação por módulo, leia a matriz de suporte de CSS.

Essas limitações são bem delimitadas e não constituem um roadmap. Cada entrada identifica o comportamento exato não suportado, não a propriedade inteira.

Comportamentos não suportados

Comportamento	O que não é aplicado	Solução alternativa
Layout por deslocamento de position: absolute / position: relative	O motor posiciona as caixas na ordem do documento. Os deslocamentos top/right/bottom/left que movem uma caixa posicionada para fora do fluxo normal não são aplicados. O posicionamento estático funciona.	Use tabelas ou flex no fluxo normal para posicionar.
grid-template-areas nomeadas	O motor não implementa o posicionamento por áreas de grade nomeadas. O posicionamento explícito da grade baseado em linhas funciona.	Posicione os itens com linhas de grade explícitas ou use uma tabela.
rowspan ao longo de uma quebra de página (degradado)	Uma célula com rowspan é renderizada em uma única página. Quando a tabela é paginada, uma célula que se estende e cruza o limite da página fragmenta-se conforme descrito no Architectural Decision Record (ADR-007), e uma célula alta demais para ser dividida lança UnsplittableContentException.	Para linhas agrupadas que precisam permanecer intactas durante a paginação, use uma linha flutuante ou uma linha de cabeçalho de categoria em vez de um rowspan alto.
Ordem de pintura do fundo com overflow: hidden	overflow: hidden não altera a ordem de pintura do fundo e não recorta o fundo de um elemento filho à caixa arredondada ou dimensionada de um ancestral.	Aplique o fundo ao elemento que faz o recorte ou evite depender de fundos recortados.
Texto que quebra lado a lado em um item flex	Um item flex com texto que quebra linha ultrapassa a própria track em vez de quebrar dentro dela.	Use uma tabela de duas colunas com larguras de coluna explícitas em pixels.
Largura percentual de coluna que resolve para zero	Quando uma width de coluna em % não tem uma base resolvível, ela é analisada como 0 e dispara o aviso de compressão de coluna.	Defina larguras explícitas em pixels para colunas lado a lado.

Veja também

• Matriz de suporte de CSS — status de verificação por módulo e recursos suportados.
• HTML: subsistema de renderização HTML+CSS para PDF — o modelo de passagem única por trás desses limites.
• Layout de tabelas em HTML — padrões de tabela para substituir o posicionamento por deslocamento e o texto com quebra em flex.