Question

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

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

Answer 1

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

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

@media print css没有给出欲望输出

1 个答案: