Google Chrome (v.51) 不应用印刷媒体 css答案

【问题标题】：Google Chrome (v.51) not applying print media cssGoogle Chrome (v.51) 不应用印刷媒体 css
【发布时间】：2016-10-23 01:55:23
【问题描述】：

我知道有很多关于此的问题，但我尝试了所有方法，但似乎没有任何效果。我点击了这些链接：

Splitting HTML page so Printer splits it into separate pages

Chrome: Print preview differs from simulate CSS media print

Print media queries being ignored in Chrome?

Google Chrome Printing Page Breaks

还有更多。

我几乎尝试了所有建议中的每一个。

这是我到目前为止所得到的：

html

<link href="path/styles/print.css" rel="stylesheet" media="print">
<div class="page-break">
      //some stuff
</div>

css

@media all {
    .page-break { display: none; }
}

@media print {
    .page-break { display: block; page-break-before: always;}
}

在 IE 和 FF 中，我看不到要打印的页面的预览，但是当我打印时，它工作得很好。在 chrome 中，我可以看到预览，但它永远不对...接下来我尝试将其保存为 pdf，但它仍然不应用打印 css。

*保存为 pdf 与尝试使其工作无关...只是为了节省纸张

现在，在您发布答案之前，请注意以下事项：

我试过这个：

！重要；破解
删除css页面，将css直接放到html页面中
全部删除媒体
全部删除媒体并将显示块更改为无
尝试过page-break-inside：避免；
*{transition:none !important;}
.page-break { ... transition: none !important;}
放在主样式表中
浮点数：无！重要；
位置：相对；位置：静态；
显示：块；显示：内联；
box-sizing: content-box;
-webkit-region-break-inside：避免；

我没有尝试使用其他版本的 Chrome。我在 v.50 上尝试过，多次尝试失败后，我更新到 v.51。有人说它适用于 v.38 或类似的东西......我不会降级到那个版本。

编辑：我忘了提到我的 html 代码在 jsp 页面中。所以<div class="page-break"> 在for-loop 中。每个循环都必须在单独的页面上。

编辑 2：我创建了一个 jsfiddle。我粘贴了我拥有的源代码，它运行良好。所以我删除了我页面中链接的 css 样式表。但即使这样做，它也行不通。因此，如果它在某处被覆盖，则它不存在。

页面是JSP页面，有什么关系吗？如果不是我一无所知，因为在同一个项目中，在我要打印的页面上，我添加了一个重定向到 page.html 的按钮，我创建了 3 个具有相同类名的 div，它工作得很好。

【问题讨论】：

这可能不是问题，但可能是类名引起了一些冲突？它是在黑暗中尝试，但很容易尝试。
@ArathiSreekumar 不错的尝试，遗憾的是它没有改变任何事情！
尝试将 'float: none' 也添加到 css 类 .page-break;基本上试试这个：stackoverflow.com/questions/4884380/…
@ArathiSreekumar 我正在交叉手指......但是不，这些答案都没有奏效。我以相同的顺序添加了样式，全部带有！important..它不起作用！
-webkit-region-break-inside：避免；在那里可能会有所帮助，但这是我能想到的最后一件事，除了如果一个父元素没有相对位置的问题。注意：所有父元素也应该是块级的。

标签： html css google-chrome printing media-queries

【解决方案1】：

所以！我是来回答我自己的问题的，以防有人不能像我一样让它工作。

我试图为我的问题提供一种新方法，因为我无法每页打印单个 div 并且我不知道为什么，我必须找到另一种方法。但这并不是说我不知道它是如何工作的……我创建了一个 JSFiddle 并且它起作用了。在我自己的项目中，我创建了一个 html 页面并且它工作正常。但是因为我在 JSP 中，也许它在某个地方弄乱了我的代码。我不知道。

这就是我所做的。

function getStuffToPrint(data){
        var html = "", index, len;
        for (index = 0, len = data.length; index < len; ++index) {
            html += "<div class=\"custom-page-break\">" + data[index].innerHTML + "</div>";
        }
        var mywindow = window.open();
            mywindow.document.write('<html><head>');
            mywindow.document.write('<link href="my/path/to/styles/print.css" rel="stylesheet" type="text/css"/>');
            mywindow.document.write('</head><body >');
            mywindow.document.write(html);
            mywindow.document.write('</body></html>');

            mywindow.document.close();
            mywindow.focus();

            mywindow.print();
            mywindow.close();

            return true;
    }

就我而言，data 是 objectHTMLCollection ：document.getElementsByClassName("custom-page-break")

这有点棘手，我不得不再次用类名写div...

这是我的 css，没有display: block 和page-break-inside 也可以工作，我什至没有尝试。

@media print {
    .custom-page-break  { 
        display: block !important;
        page-break-before: always !important;
        page-break-inside: avoid !important;
    }
}

希望它能为某些人节省时间。

【讨论】：

【解决方案2】：

您是否尝试将 print.css 放入您的主要样式 css 文档中？我有一个类似的案例，它解决了我的问题。

您不必每次都制作pdf文件来查看@media打印是否有效，您可以在Chrome上的Google开发工具中看到模拟打印的页面：

要查看该选项，请执行以下操作：F12 -> 显示控制台 -> 渲染（它是控制台的选项卡）-> 选中“模拟媒体打印”。

【讨论】：

感谢您的快速回答。是的，我忘了提到它，起初它在我的主要 style.css 中，它不起作用所以我将它移到另一个 css 文件中。我也尝试了复选框，但我不明白在哪里......是当我看到页面时，还是当我点击打印并查看预览时？因为当我检查它时，没有任何令人耳目一新的东西，它保持不变..
实际上我找到了它应该做的事情。但我仍然无法让它工作