文本周围的白色边框覆盖背景颜色答案

【问题标题】：White border around text covers background color文本周围的白色边框覆盖背景颜色
【发布时间】：2019-09-05 19:21:56
【问题描述】：

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

这是屏幕上页面的屏幕截图：

这是使用系统打印对话框打印的 PDF 的屏幕截图：

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

【问题讨论】：

对我来说它运行得很好。可能是浏览器/网络服务器问题？
打印时是否使用了“使用系统对话框打印... (Ctrl+Shift+P)”选项？
ctrl + p 为我做了。操作系统：win7x64，chrome 28。输出格式：pdf
该页面位于 node-webkit 应用程序中，因此该功能不可用。
或许你想发布一个链接呢？

标签： html css webkit printing-web-page

【解决方案1】：

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

试试

background-color : transparent;

或

background-color: #FFD700;

关于#menu的子元素

编辑

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

编辑：

可能是驱动问题？

【讨论】：

那些是什么元素？内部HTML？
我考虑过为#menu...的所有孩子明确分配课程，因此对于<b>Menu</b><br> HTML<br> CSS<br> JavaScript
我在孩子周围添加了一个
并设置了这些 CSS 属性，但没有成功。
我宁愿直接将类分配给一个元素，例如<div class="menuClass">Menu</div> 和以下 CSS：.menuClass { font-weight: bold; background-color: transparent; /* or #FFD700 */
是的，它看起来像驱动程序问题。该页面在办公室的另一台 PC 上打印良好。