Dlaczego istnieje taka rozbieżność między emulacją CSS w drukarce Chrome a podglądem wydruku?

Question

Mam witrynę opartą na Bootstrap 3. Drukowanie niektórych stron jest ważne dla naszych klientów. Większość stron jest drukowana w sposób dopuszczalny, z wyjątkiem modalnych okien dialogowych.

Próbuję użyć emulacji drukowania CSS Chrome (v42.0.2311.135 m), aby ulepszyć arkusz stylów drukowania. Jednak nie przypomina to podglądu wydruku, ani tego, co faktycznie wychodzi z drukarki.

Chcę, aby wersja drukowana modałów obejmowała cały ekran. Oto co mam do tej pory:

---

ekran:

---

emulacja druku CSS (wygląda dobrze, modalna zajmuje cały ekran):

---

Podgląd wydruku/rzeczywista Kopię (całkowicie błędne - modalna jest mały i mogę zobaczyć resztę strony):

Oto stosowne fragmenty mojego wydruku arkusza :

@media print { 
    * { 
     -moz-transition: none !important; 
     -o-transition: none !important; 
     -webkit-transition: none !important; 
     transition: none !important; 
    } 

    .modal-backdrop { 
     background-color: white!important; 
    } 

    .modal.center .modal-dialog { 
     width: 100%; 
     max-width: 100%; 
     height: 90%; 

    } 
} 

---

Jak mogę th e Wydrukuj emulację CSS, aby przypominała rzeczywiste wydruki?

Answer 1

Nośnik css: drukowanie w emulacji jest tylko w celu stosowania reguł drukowania css do strony, nie uwzględnia wszystkich innych rzeczy, które towarzyszą drukowaniu.

Na przykład obrazy i kolory tła nie są drukowane domyślnie (dlatego wyświetlana jest główna treść, że kolor bg: biały nie jest stosowany). Inne rzeczy mogą być problemami, takimi jak bezwzględne pozycjonowanie. Jedynym niezawodnym sposobem przetestowania druku jest drukowanie lub przynajmniej drukowanie do formatu PDF.

Warto również zauważyć, że w drukarce wystąpią rozbieżności w przeglądarkach.