Question

我正在处理一组需要打印的HTML报告。屏幕上的所有内容都显示正常，但打印页面时，所有文本元素周围都有一个白框。

以下是屏幕上页面的屏幕截图：
screen shot of the page on screen http://oi41.tinypic.com/345onf4.jpg

以下是使用系统打印对话框打印的PDF的屏幕截图：
screen shot of a PDF printed using the system print dialog http://oi43.tinypic.com/2vvmc9c.jpg

这是HTML：

<!DOCTYPE html>
    <html>
        <head>
            <link rel="Stylesheet" type="text/css" href="../css/style.css" media="all"/>
        </head>
    <body>
        <div id="container">
        <div id="menu">
            <b>Menu</b><br>
            HTML<br>
            CSS<br>
            JavaScript</div>
        <div id="content">
            Content goes here</div>
    </body>
</html>

这是CSS：

@media print
{
    /* Hides elements on page when printed */
    .nonPrinting
    {
        display: none;
    }
    /* Forces the background colors / images to display when printing */
    body
    {
        -webkit-print-color-adjust : exact;
    }
}

#container
{
    width:500px;
}

#menu
{
    background-color:#FFD700;
    height:200px;
    width:100px;
    float:left;
}
#content
{
    background-color:#EEEEEE;
    height:200px;
    width:400px;
    float:left;
}

页面在node-webkit应用程序中运行。

Answer 1

您是否尝试在这些元素上指定特定的背景颜色？

尝试

background-color : transparent;

或

background-color: #FFD700;

关于#menu

的子元素

修改

这就是'print'pdf对我来说的样子：

修改

也许这是一个驱动程序问题？

在文本附近的白色边界包括背景颜色

1 个答案: