CSS @media print không hoạt động ở tất cả

Question

Tôi đang gặp khó khăn hàng giờ vì sao in @media không hoạt động, tôi tìm kiếm trên Google ngay cả trên trang này và không có gì hữu ích, vì vậy đó là lý do tôi đăng câu hỏi này. Tôi đang thử nghiệm nó trên Google chrome xem trước in (ctrl p) nhưng tôi cũng in trang và nó vẫn trống.

Tôi cố gắng tạo một tệp css riêng biệt và cũng là một kiểu css được nhúng vào trang.

Đây là mã của tôi

Headers

<link rel="stylesheet" type="text/css" href="css/reset.css" /> 
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" /> 

HTML

<div id="bruikleenovereenkomst"> 
    <div id="blo_header"> 

    </div> 

    <div id="blo_side_top"></div> 
    <div id="blo_side_bottom"></div> 
</div>  

CSS phong cách bình thường

div#bruikleenovereenkomst { 
    width:595px; 
    height:842px; 
    background-color:#fff; 
    position:relative; 
} 

div#blo_header { 
    width:100%; 
    height:125px; 
    background-color:#FBE983; 
    z-index:9 
} 

div#blo_side_top { 
    width:57px; 
    height:420px; 
    background-color:#B6CAE5; 
    position:absolute; 
    right:0; 
    top:0; 
    z-index:99; 
} 

div#blo_side_bottom { 
    width:57px; 
    height:420px; 
    background-image:url(../images/leaflet.png); 
    background-repeat:no-repeat; 
    position:absolute; 
    right:0; 
    bottom:0; 
    z-index:99; 
} 

phong cách CSS in (print.css) lưu ý: div #bruikleenovereenkom st chỉ là một khối màu đen để thử nghiệm.

@media print{ 

    body { 
     margin:0; 
    } 

    h1#logo { 
     display:none; 
    } 

    ul#menu { 
     display:none; 
    } 

    div#bruikleenovereenkomst { 
     width:100%; 
     height:500px; 
     background-color:#000; 
    } 

    div#blo_header { 
     display:none; 
    } 

    div#blo_side_top { 
     display:none; 
    } 

    div#blo_side_bottom { 
     display:none; 
    } 

} 

Tất cả những gì tôi nhận được khi in chỉ là một trang trống.

Answer 1

Nếu bạn đang sử dụng @media print, bạn cần phải thêm! Quan trọng trong phong cách của bạn hoặc trang sẽ sử dụng kiểu nội tuyến của phần tử có mức độ ưu tiên cao hơn.

Ví dụ:

<div class="myelement1" style="display:block;">My div has an inline style.</div> 

Trong @media in, thêm! Quan trọng và trở thành một người chiến thắng

@media print { 
    .myelement1, .myelement2 { display: none !important; } 
} 

Answer 2

Trước tiên, tôi sẽ thử thêm khoảng trắng sau khi in. Không được tạo sự khác biệt, nhưng .....

@media print { 
    /*print css here*/ 
} 

Tiếp theo, in trong trình duyệt thường bỏ qua màu nền. Hãy thử sử dụng 'hộp bóng' ....

@media print { 
    #bruikleenovereenkomst { 
     width: 100%; 
     height: 500px; 
     box-shadow: inset 0 0 0 1000px #000; 
    } 
} 

Smashing Magazine có một số gợi ý tuyệt vời: http://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ Lưu ý rằng họ nói về in ấn từ một trình duyệt Webkit (Chrome hoặc Safari, ví dụ), và cố gắng để buộc máy in hiển thị màu khi chúng xuất hiện trên màn hình bằng cách sử dụng truy vấn phương tiện riêng biệt .....

@media print and (color) { 
    * { 
     -webkit-print-color-adjust: exact; 
     print-color-adjust: exact; 
    } 
} 

Hy vọng điều này sẽ hữu ích!