3

我使用@media print 和@media screen 进行打印。对于@media screen，它可以正常工作，但对于@media print，它不会将虚线表显​​示为屏幕。

   @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 浏览器。

4

1 回答 1

2

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

在准备打印页面时，浏览器会删除一些装饰。在大多数浏览器中，背景已被删除。也许边界也被删除了？

于 2013-04-11T06:54:23.240 回答