Question

我在基于webkit的浏览器中遇到了一些打印样式表的布局问题，我想知道是否有CSS选择器，或者其他方法来执行CSS hack以仅定位webkit / media print？

传统的webkit-min-device-pixel-ratio媒体查询选择器不适用于打印。

那么什么是相当于这个CSS Hack的打印？（更改要打印的媒体，不起作用）：

@media screen and (-webkit-min-device-pixel-ratio:0) {

}

Answer 1

您可以使用javascript仅为WebKit浏览器加载CSS文件。

<head>
    <link rel="stylesheet" id="hacks"/>
    <script>
        if(navigator.userAgent.indexOf("WebKit") != -1) {
            document.getElementById("hacks").href="hacks.css";
        }
    </script>
</head>

Answer 2

您可以包含一个仅用于webkit浏览器的样式表，如下所示：

@media print and (-webkit-min-device-pixel-ratio:0) {
    .black {
        color:black;
    }
}

其他浏览器也有类似的功能。

Answer 3

改为使用webkit-any-link：

@media print 
  {
  * > /**/ #foo, x:-webkit-any-link { padding-top: 200px; }
  }

* > /**/选择器用于过滤IE7，如果不受支持，可以将其删除：

@media print 
  {
  #foo, x:-webkit-any-link { padding-top: 200px; }
  }

<强>参考

如何仅在打印样式表中定位基于webkit的浏览器？

3 个答案: