@media print css doesnot給出了期望輸出

我使用@media print和@media屏幕進行打印。對於@media屏幕，它工作正常，但對於@media打印，它不會將虛線表格顯示爲屏幕。@media print css doesnot給出了期望輸出

@media screen{ 
    body{ 
     font-family:"Courier New", Courier, monospace; 
     font-size:13px; 
    } 
    .f1{ 
     text-transform:uppercase; 
     display:block; 
     text-align:center; 
    } 

    .f2{ 
     text-transform:uppercase; 
     display:block; 
     margin-left:10px; 
    } 

    .border_bottom{ 
     border-bottom:2px dashed #000; 
    } 
    .border_top{ 
     border-top:2px dashed #000; 
    } 

    .body_table{ 
     border:1px dashed #CCCCCC; 
     padding:.5em; 
    } 
} 

    @media print { 
      body { 
       font: 12pt georgia,serif; 
      } 

      h1 { 
       font-size: 18pt; 
      } 

    h2 { 
     font-size: 15pt; 
     color: #000; 
    } 

       .border_bottom{ 
     border-bottom:2px dashed #000; 
    } 
    .border_top{ 
     border-top:2px dashed #000; 
    } 

    .body_table{ 
     border:1px dashed #CCCCCC; 
     padding:.5em; 
      } 
     }

通過上面的這些代碼，@media屏幕可以正常工作，因爲我認爲。即我可以看到帶有虛線邊框的帳單，但是在打印部分，虛線邊框不起作用並且未顯示。賬單在桌子上，當我打印桌子時也看不到。

我的HTML代碼

<body > 
    <form id="form1" runat="server"> 
    <div id="divprint"> 
     <table> 
      <tr> 
       <td>name</td> 
      </tr> 
      <tr> 
       <td>Roll</td> 
      </tr> 
     </table> 

    </div> 
     <asp:button runat="server" ID="btn_prnt" OnClientClick="CallPrint('divprint')" Text="Print" /> 
    </form> 
</body>

注：我使用Waterfox 18.0.1的browers。

來源

2013-04-10 Bhim Prasad Ale

如果您還發布了一段HTML代碼，並與給定的CSS一起使用會更好。這將有助於我們更好地瞭解您的情況，並且可能會有人能夠告訴您如何解決問題。 – 2013-04-10 07:59:43

此外，具體說明您用於測試目的的瀏覽器也是有益的。 – seemly 2013-04-10 08:03:14

您提供的HTML不包含.border_top和.body_table元素。因此，沒有邊界。請通過http://codepen.io或http://jsbin.com分享有效的CSS和HTML。

當準備打印頁面時，瀏覽器會刪除一些裝飾。在大多數瀏覽器中都會刪除背景。也許邊界也被刪除？

來源

2013-04-11 06:54:23

我在媒體屏幕和medai打印上使用.border_top和.body_table。我必須在html上使用.border_top和.body_table嗎？ – 2013-04-11 07:07:34

CSS應用於HTML元素。如果您使用不與任何HTML元素相對應的CSS選擇器，則這些選擇器背後的樣式不會應用於任何位置。 PS不要忘記註冊並選擇答案。 – 2013-04-11 10:14:22

@media print css doesnot給出了期望輸出

回答

相關問題