Question

在我的下面的代码中，我正在使用CSS打印功能。因此，当我使用以下代码时，我可以在两种情况下看到KRON4旁边的网址：

1）当我在浏览器窗口中查看页面时 2）当我点击浏览器上的打印按钮时。

我正在尝试仅在上述方案2的情况下打印URL。也就是说，当我点击浏览器窗口上的打印按钮时，我应该看到KRON 4旁边的URL，为此我用以下<style>替换了下面代码中media query标记的内容。：

<style type="text/css">
    @media print body {
        a[href^="http://"]:after {
            content: " (" attr(href) ")";
            color: blue;
            font-size: small;
        }
    }
</style>

使用上述样式内容后，我看不到要打印的网址。

请在没有媒体查询的情况下考虑以下代码：

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Print Media and Mobile Devices</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style type="text/css">
         a[href^="http://"]:after{
         content: " (" attr(href) ")";
         color: blue;
         font-size: small;
         }
      </style>
   </head>
   <body>
      <p>
         <a href="http://kron4.com/">KRON 4</a> 
      </p>
   </body>
</html>

Answer 1

我在这里的想法会有点不同，如JS Fiddle

所示

问题是我隐藏了链接，只有在打印时才能看到它。我在JS Fiddle（Mozilla Firefox打印预览版）中测试过并且工作过，但请确保您在其他浏览器中测试它。哦，你也可以为.hide类做一些浮动：左或其他样式，以便定位链接。

所以诀窍是这样的：

.hide {
  display:none;
}

@media print {
.hide {
    display:inline-block;
  }
}

希望它有所帮助，

安德鲁

Answer 2

你的css几乎已经完成，如果添加

应该可以正常工作

display: inline-block;

所以，你应该

@media print body {

a[href^="http://"]:after{
content: " (" attr(href) ")";
color: blue;
display: inline-block;
font-size: small;
        }

        }
</style>

链接到工作JsFiddle。这适用于所有浏览器。

尝试使用css print打印URL

2 个答案: