html - 文本周围的白色边框覆盖背景颜色

标签 html css webkit printing-web-page

我正在处理一组需要打印的 HTML 报告。屏幕上看起来一切正常,但打印页面时,所有文本元素周围都会出现一个白框。

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

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

这是 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 应用程序中运行。

最佳答案

您是否尝试过为这些元素分配特定的背景颜色?

尝试

background-color : transparent;

background-color: #FFD700;

#menu的子元素上

编辑

这就是“打印”pdf 对我来说的样子:

pdf at my computer

编辑:

可能是驱动问题?

关于html - 文本周围的白色边框覆盖背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17841505/

相关文章:

iphone - 适用于 Safari、Iphone 的 Webkit API

c# - 如何使用 WebKit.NET 访问 DOM?

javascript - 函数只运行一次

javascript - 从文本区域获取带有字符串 ("Line no."的行号?

html - 大型下拉菜单与背景图片冲突

css - 嵌套和非嵌套规则的 LESS mixin

javascript - 从 javascript 文件加载 css 时,我应该如何在加载 css 文件之前隐藏 html 输出?

html - iframe 中的 Fullpage.js 无法在 IOS 移动设备上滚动

javascript - 一键点击生成所有结果 - Javascript

html - SVG <image> 元素未在 Safari 中显示