css 打印查询在 firefox 中不工作

Question

这是我的代码，打印时它在 chrome 浏览器中运行良好，但在 Firefox 中它不支持 css 很多项目隐藏在打印区域中

function printDiv(divName) {
  
            var divElements = document.getElementById(divName).innerHTML;
            //Get the HTML of whole page
            var oldPage = document.body.innerHTML;

            //Reset the page's HTML with div's HTML only
            document.body.innerHTML = 
              "<html><head><title></title></head><body> <div style='width: 21cm; margin:0 auto;'>" + 
              divElements + "</div></body>";

            //Print Page
            window.print();

            //Restore orignal HTML
            document.body.innerHTML = oldPage;
}

.print-button {
    width: 120px;
    height: 30px;
    background: #1abc9c;
    color: #FFFFFF;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    float: right;
}

.print-header, .print-footer {
  display: none;
}

@media print { 
 /* All your print styles go here */
 .print-header, .print-footer {
  display: inherit;
 }
 .print-footer {
    float: left;
    width: 100%;
    padding-top: 20%;
}
.pfooter {
    float: right;
    /* padding-top: 6%; */
    border-top: 1px solid black;
}
 .print-middle {
    float: left;
    width: 100%;
}
.ptable-header {
    float: left;
    padding-top: 4%;
    width: 100%;
}
.printHead {
    text-align: center;
    margin: 0 auto;
}
.psection {
    width: 25%;
    float: left;
}


.print-logo {
    float: left;
    width: 80px;
}
.print-logo img {
    width: 78px;
}
.report-date {
    float: right;
}
.psub {
    width: 40%;
}
.punit {
    width: 11%;
}
.pdes {
    width: 21%;
}
.pyear {
    width: 11%;
}
.ptotal {
    width: 12%;
}
}

<div id="list_table">
         <h2>Total project found: 2 <input class="print-button" type="button" onclick="printDiv('printableArea')" value="Print"> </h2>
  <div id="printableArea">
   <div class="print-header">
    <div class="printHead">
        <h2 class="ptitle">
        দুর্যোগ ব্যাবস্থাপনা ও ত্রান মন্ত্রনালয়
        </h2>  
        <h3>
          কাজের বিনিময়ে খাদ্য প্রকল্প
         </h3>
    </div>
    <div class="print-middle">

        <div class="print-logo">
         <img src="http://192.185.183.190/~ssnp/spmis/images/logo.png">
     </div>
        <div class="report-date">
      
                 প্রতিবেদনের তারিখঃ (২০১৬-০১-০৫) 
        </div>

    </div>
      <div class="ptable-header">
                     <div class="psection">
                <span>বিভাগঃ</span>
                             বরিশাল              </div>
                 <div class="psection">
         <span>জেলাঃ</span>
                                                           ভোলা              </div>
                       <div class="psection">
                            
         <span>উপজেলাঃ</span>
                                                  মনপুরা              </div>
                       <div class="psection">
         <span>ইউনিয়নঃ</span>
                                       সাকুচিয়া 
              </div>
              
     
      </div>
   </div>
  
         <table>
    <thead>
     <tr><th>ক্রমিক নং</th>
     <th class="psub">প্রকল্পের ধরন</th>
     <th class="punit">সংখ্যা</th>
                    <th class="punit">একক</th>
     <!--<th>দৈর্ঘ্য</th>
     <th>প্রস্থ</th>
     <th>উচ্চতা/গভীরতা </th>
     <th>ক্ষেত্রফল</th>
     <th>অন্যান্য</th>  -->
     <th class="ptotal">বরাদ্দের পরিমাণ</th>
     <th class="ptotal">ব্যয়ের পরিমাণ</th>
     <th class="pyear">অগ্রগতীর হার %</th> 
    
    </tr></thead>
        <tbody><tr>
     <td>1</td>
     <td class="pdes">
                                      রাস্তা নির্মাণ                                                         </td>
     <td class="psub">1</td>
                    <td class="punit">55555</td>
     <!--<td></td>
     <td></td>
     <td></td>
     <td></td>  
     <td></td> -->
     <td class="ptotal">25.00</td>
     <td class="ptotal">25.00</td>
     <td class="pyear">                      100

     </td>
     
    </tr>
        <tr>
     <td>2</td>
     <td class="pdes">
                                      রাস্তা পুনর্নিমাণ                                                         </td>
     <td class="psub">16</td>
                    <td class="punit">55555</td>
     <!--<td></td>
     <td></td>
     <td></td>
     <td></td>  
     <td></td> -->
     <td class="ptotal">292.00</td>
     <td class="ptotal">292.00</td>
     <td class="pyear">                      100

     </td>
     
    </tr>
                               <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td>মোটঃ 317</td>
     <td>মোটঃ 317</td>
     
     <td></td>
    </tr>
   </tbody></table>

   <div class="print-footer">
             <div class="footer-amount">
     <!-- <h3>
     মোট বরাদ্দের পরিমাণঃ
             </h3>
        <h3>
     মোট ব্যয়ের পরিমাণঃ
          <h3> -->
    </div>
     <div class="pfooter">
      অনুমোদনকারীর স্বাক্ষর, সীল ও তারিখ 
     </div>
   </div>
     </div>
        </div>

Answer 1

您必须将 !important 与@media print 一起使用。希望对你有用。

Answer 2

@media print 在 Firefox 自 version 3.5.

支持

您可以尝试以旧方式添加打印 css：

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

Answer 3

您在引用 CSS 时是否使用了 media="screen" 规定？如果是这样，您可以完全删除它并使用以下内容：

<link href="/styles.css" rel="stylesheet" type="text/css" />

Answer 4

我解决了我的问题。在我的 JS 中，我使用了新的 html 代码，头部与我的主站点不同。我在那个头部部分添加了我的 css link 然后我解决了我的问题。像这样

printDivCSS = new String ('<link href="../css/print.css" rel="stylesheet" type="text/css">');

function printDiv(divName) {

 var originalContents = document.body.innerHTML;

 document.body.innerHTML = printContents;
 window.open('', '_blank', 'width=800,height=auto');

 document.body.innerHTML = originalContents;*/

 var divElements = document.getElementById(divName).innerHTML;

 var oldPage = document.body.innerHTML;

 //Reset the page's HTML with div's HTML only
 document.body.innerHTML = 
          "<html><head>" + 
          printDivCSS + "<title></title></head><body class='printarea'> <div style='width: 21cm; margin:0 auto;'>" + 
          divElements + "</div></body>";

        //Print Page
        window.print();

        //Restore orignal HTML
        document.body.innerHTML = oldPage;
 }

css 打印查询在 firefox 中不工作

css print query not working in firefox

html

javascript

css

jquery

media-queries