web列印時需要注意的CSS樣式

今天寫了一個在前端列印的功能，遇到了一個很坑的問題，設定的背景色打印的時候不起作用：
不起作用的css樣式：

.p_class2_1{       
color:white;       
float:left;       
background: #808080!important;  
width:80%;  
}    
.p_class3_1{     
color:white;     
float:left;     
background: #808080!important;  
width:100%;
}       
.p_class5_1{     
color:white;    
background: #808080!important;  
width:100%;
}

結果怎麼都不起作用，

後來透過各種辦法解決：
下面是解決的程式碼：

.p_class2_1{       
color:white;       
float:left;      
 background: #808080!important;  
       filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080',EndColorStr='#808080');  
       width:80%;
       }
       .p_class3_1{     
       color:white;     
       float:left;    
       background: #808080!important;  
     filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080',EndColorStr='#808080');  
     width:100%;}
     .p_class5_1{     
     color:white;     
     background: #808080!important;  
     filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080',EndColorStr='#808080');  
     width:100%;}   

 @media print {  
        .p_class2_1 {-webkit-print-color-adjust: exact;}  
        .p_class3_1 {-webkit-print-color-adjust: exact;} 
        .p_class5_1 {-webkit-print-color-adjust: exact;} 
    }

結果如下：

#發現之前沒顯示的背景色，現在顯示了！
最主要的程式碼是@media print { <br>        .p_class2_1 {-webkit-print-color-adjust: exact;} <br>        .p_class3_1 {-webkit-print-color-adjust: exact;}  <br>        .p_class5_1 {-webkit-print-color-adjust: exact;}  <br>    }  @media print是為了讓列印的時候顯示背景色，預設是不顯示的！

#

以上是web列印時需要注意的CSS樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！