在文本附近的白色边界包括背景颜色(White border around text covers background color)

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

这是屏幕上页面的屏幕截图：屏幕上的屏幕截图http://oi41.tinypic.com/345onf4.jpg

以下是使用系统打印对话框打印的PDF的屏幕截图：使用系统打印对话框http://oi43.tinypic.com/2vvmc9c.jpg打印的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应用程序内运行。

I am working on a set of HTML reports that need to be printed. 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: screen shot of the page on screen http://oi41.tinypic.com/345onf4.jpg

Here is a screen shot of a PDF printed using the system print dialog: screen shot of a PDF printed using the system print dialog http://oi43.tinypic.com/2vvmc9c.jpg

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

@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.