html - 谷歌浏览器 (v.51) 未应用打印媒体 css

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

还有更多。

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

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

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页面
全部删除媒体
删除所有媒体并将显示 block 更改为无
尝试了 page-break-inside: avoid;
*{transition:none !important;}
.page-break { ... transition: none !important;}
放在主样式表中
float :无!重要；
position:relative；位置:静态；
显示: block ；显示:内联；
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，它工作得很好。

最佳答案

所以!我来这里是为了回答我自己的问题，以防有人无法像我一样让它发挥作用。

我试图提供一种新的方法来解决我的问题，因为我不能在每页上打印一个 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;
    }
}

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

关于html - 谷歌浏览器 (v.51) 未应用打印媒体 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37945748/

html - 谷歌浏览器 (v.51) 未应用打印媒体 css

上一篇：html - 行高不适用于 ios chrome

下一篇：css - 如何或在何处更改 Bootstrap 列宽？