简体   繁体   English

文字周围的白色边框覆盖背景色

[英]White border around text covers background color

I am working on a set of HTML reports that need to be printed. 我正在处理一组需要打印的HTML报告。 Everything looks OK on the screen, but a white box surrounds all of the text elements when the page is printed. 屏幕上一切正常,但是在打印页面时,所有文本元素周围都有一个白色框。

Here is a screen shot of the page on screen: 这是屏幕上的页面的屏幕截图:
屏幕页面的屏幕截图

Here is a screen shot of a PDF printed using the system print dialog: 这是使用系统打印对话框打印的PDF的屏幕截图:
使用系统打印对话框打印的PDF的屏幕截图

Here's the HTML: 这是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>

Here is the CSS: 这是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;
}

The pages are running inside of a node-webkit application. 这些页面在节点Webkit应用程序内部运行。

Have you tried assigning a specific background-color on these elements? 您是否尝试过为这些元素分配特定的背景颜色?

Try 尝试

background-color : transparent;

or 要么

background-color: #FFD700;

on the child elements of #menu #menu的子元素上

EDIT 编辑

This is how the 'printed' pdf looks like for me: 这是“印刷” pdf的样子:

我电脑上的pdf

EDIT: 编辑:

Maybe it's a driver issue? 也许是驾驶员问题?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM