Eu tenho uma página com uma estrutura semelhante a esta:
<main>
<section>
<article></article>
<aside></aside>
</section>
</main>
No CSS, incluo o seguinte:
main {
display: flex;
flex-direction: row;
}
O artigo é muitas vezes muitas páginas.
Quando imprimo ou imprimo, acho que só me dá a primeira página. Depois de algumas experiências, tenho esta solução:
@media print {
aside {
display: none;
}
main {
display: block;
}
}
Isto é, usando display: block
Consigo que todas as páginas sejam impressas novamente. Nesse caso, tudo bem, porque eu não quero o aside
para imprimir, então eu não preciso do flex
comportamento, mas nem sempre é o caso.
Parece funcionar bem no Safari e no Chrome. Eu estou testando isso em um Mac.
Por que isso não funciona no Firefox?
A página atual pode ser encontrada em: https://www.thewebcoder.net/articles/toggling-attributes. Ainda está em seus estágios iniciais.
Respostas:
10 para resposta № 1Tendo analisado isso um pouco agora, eu ainda não tenho certeza sobre o que o Firefox faz com que a impressão de contêineres flexíveis seja cortada. Eu encontrei alguns relatórios de bugs extremamente antigos no Bugzilla (por exemplo. https://bugzilla.mozilla.org/show_bug.cgi?id=258397), mas eles tinham algo a ver com propriedades de estouro no body
tag. Infelizmente, tentando ajustar o excesso de corpo para isso não faz nada.
Eu até fui para Bootstrap 4 "s page que usa layouts com base no flexbox. Com certeza, a tentativa de imprimi-lo no Firefox resulta no mesmo problema.
Finalmente, até display: inline-block
tem o mesmo efeito.
Parece-me que forçando display: block
na impressão é o que vai garantir que o Firefox paginecorretamente. Idealmente, o layout que você usa para impressão será o mais simples possível, de modo que isso não se torne um grande obstáculo. Ainda assim, é muito surpreendente, pelo menos para mim.
Talvez alguém com mais conhecimento possa entrar em contato e informar se esse é um bug legítimo do Firefox ou apenas parte de sua filosofia de design.