打印/预览忽略我的 Print.css答案

【问题标题】：Print/Preview Ignoring my Print.css打印/预览忽略我的 Print.css
【发布时间】：2011-11-28 14:14:17
【问题描述】：

我有一个问题让我有些头疼。我正在尝试打印报告并使用 print.css 正确格式化它，但它每次都完全忽略我的 css。以前有人遇到过这个问题吗？我确保 CSS 文件位于正确的目录等中，但仍然没有运气。

这是我的模板：

注意：我使用 javascript 来控制打印按钮，并且在 javascript 中包含了 CSS 链接。我也试过把它放在 HTML 页面上，但没有帮助。

...
<script type="text/javascript">

function printContent(id){

   str=document.getElementById(id).innerHTML
   newwin=window.open('','printwin','left=100,top=100,'+
                         'width=900,height=400, scrollbars=1')
   newwin.document.write('<HTML>\n<HEAD>\n')
   newwin.document.write('<TITLE>Print Page</TITLE>\n')
   newwin.document.write('<link rel="stylesheet" type="text/css" '+
                         'href="/media/css/print.css" media="print"/>\n')
   newwin.document.write('<script>\n')
   ...

现在对于这个项目，我使用的是 Ubuntu 10.10 和 Firefox 7。如果这有帮助的话。

编辑

我为 Firefox 安装了 Web 开发人员工具栏。它允许您将页面视为不同的媒体。现在，当我单击打印时，它会显示我所有的样式更改，但是当我打印时，它不会跟随它们。

【问题讨论】：

CSS 中有什么？换句话说，究竟是什么让你认为你的风格被忽视了？我之所以这么问，是因为浏览器对打印样式表的支持真的很糟糕，而且有很多本来应该可以工作的东西根本不起作用。
你试过省略media="print"吗？由于该窗口专门用于打印，因此我认为不需要将电子表格附加到特定的媒体类型。
@Pointy 样式表的标题、hr 样式元素等有不同的字体大小。检查我上面的 edit
@SurrealDreams 我也试过省略 media="print" 但没有这样的运气
你为什么要动态放入css？我认为这会给您带来问题，因为打印时不会执行 javascript。

标签： javascript html css django

【解决方案1】：

<html>
    <head>
        <title>your website title</title>
        <link rel="stylesheet" media="screen" href="/media/css/mainStyle.css" type="text/css">
        <link rel="stylesheet" media="print" href="/media/css/print.css" type="text/css">
    </head>
    <body>
        <input type="button" value="Print" onClick="javascript:window.print();" />
    </body>
</html>

也许你可能想试试上面的 HTML 模板，看看它是否适合你或适合你的需要。

在我看来，您提议的函数实际上最好用 javascript 在服务器端而不是客户端编写，因为您正试图在其中动态生成 html 页面。您可以将该页面输出为 print.html 或其他内容，一旦将其发送到客户端，您就可以应用 print.css 样式并进行打印。无论如何，这里只是一些想法，希望它对您的情况有所帮助。干杯。

【讨论】：

【解决方案2】：

不确定这是否有帮助，但 @media print{} 应该在打印作业期间封装所有样式。

<style type="text/css">
    @media print{
        /* Make the HR tag have 50 px spacing above and below */
        hr{ padding: 50px 0px; }
    }
</style>

这是 SUPPOSED 处理这种类型的样式。脚本仍然可以负责包含 css 文件，但 @media print{} 会告诉嵌入其中的所有样式仅适用于打印作业。

【讨论】：

我确定你的意思是不是