CSS: Flex Kutu Ben buna benzer bir yapıya sahip bir sayfa var Firefox

Question

tüm sayfaları yazdırma değil:

main { 
    display: flex; 
    flex-direction: row; 
} 

makale:

<main> 
    <section> 
     <article></article> 
     <aside></aside> 
    </section> 
</main> 

CSS, ben şunlar çoğu sayfa uzunluğundadır.

Önizleme yazdırırken veya yazdırırken, yalnızca bana ilk sayfayı verdiğimi buluyorum.

@media print { 
    aside { 
     display: none; 
    } 
    main { 
     display: block; 
    } 
} 

Tekrar yazdırmak için tüm sayfaları alabilirsiniz display: block kullanarak vardır: Bazı Deneme yaparken sonra bu çözümü var. Bu durumda, aside'un yazdırılmasını istemediğimden, flex davranışına ihtiyacım yoktur, ancak bu her zaman böyle değildir.

Safari ve Chrome'da iyi çalışıyor gibi görünüyor. Bunu Mac'te test ediyorum.

Neden bu Firefox'ta çalışmıyor?

Asıl sayfa şu adreste bulunabilir: https://www.thewebcoder.net/articles/toggling-attributes. Hala erken aşamalarında.

Answer 1

Şimdilik birazdan baktığımızda, Firefox'un baskı kaplarının kesilmesinin neden olduğu konusunda hala emin değilim. Bugzilla'da bazı son derece eski hata raporları buldum (örneğin, https://bugzilla.mozilla.org/show_bug.cgi?id=258397), ancak body etiketinde taşma özelliklerine sahip bir şeyler vardı. Ne yazık ki, bunun için vücut taşmasını ayarlamaya çalışmak hiçbir şey yapmaz.

Hatta flexbox tabanlı düzenleri kullanan Bootstrap 4's page adresine gittim. Tabii ki, Firefox'ta yazdırmaya çalışmak aynı sorunla sonuçlanır.

Son olarak, display: inline-block bile aynı etkiye sahiptir.

Baskıda display: block'u zorlamak Firefox'un doğru bir şekilde yazılmasını sağlayacak olan şeydir. İdeal olarak, baskı için kullandığınız düzen, olabildiğince basit olacak, böylece bu durum çok fazla engel oluşturmayacaktır. Yine de, en azından benim için çok şaşırtıcı.

Belki de daha fazla bilgiye sahip biri, bunun meşru bir Firefox hatası mı, yoksa tasarım felsefesinin bir parçası olup olmadığını anlatabilir ve bilgilendirebilir.