打印网页时如何不打印链接位置？

Question

我正在使用简单的window.print();调用来调用导航器打印功能。它完美地打印了（我想打印与屏幕上看到的相同，所以我不需要特殊的CSS进行打印），但它在文本链接旁边显示链接位置，类似于：

    Homepage (http://localhost)

更清楚地说，我不想将链接位置放在打印版本中与链接附近，我可以控制CSS，但找不到任何定义此行为的地方，因此我认为这是与浏览器相关的问题！

编辑：这发生在Firefox 3.6.8和最新的Chrome上，在Ubuntu和Windows XP/Vista下都会出现。

- Adirael

---

什么浏览器、平台。这不是你在浏览器的打印设置中自己设置的吗？ - mplungjan

这听起来像是特定于浏览器的东西。 - Pekka

在所有页面上还是只在您的页面上？您可以安装WebDeveloper或Firebug并扫描所有CSS，或者也许您的IS部门中有人安装了用户CSS？ - mplungjan

刚刚安装了 FF 3.6.8，绝对不是默认行为，而且由于你在 Chrome 中也看到了它，那肯定是出现在你的页面中。 你有网址吗？ - mplungjan

在像Drupal、Bootstrap、Foundation、HTML5 Boilerplate等库中，为打印链接添加这种荒谬的“url文本”似乎是一种常见的恼人问题。[也可以看看这个问题。]（https://dev59.com/c2w05IYBdhLWcg3wVgam）*（他们为什么都这样做？谁决定这很有用？所谓的所见即所得原则到底发生了什么？/抱怨）* - ADTC

Answer 1

为了避免在打印网页时额外显示链接信息，请将以下规则添加到@media print标签中：

a:link:after, a:visited:after {
    content: "";
}

这将会移除丑陋的链接信息，例如 Homepage (http://localhost) ，并将其缩短为 Homepage。当然，你可以添加规则以避免仅在文本部分中或仅在导航中出现此情况，但你不应该在网页的打印格式中显示导航。

- mliebelt

---

在火狐浏览器上无法运行。:( - Sizzling Code

Answer 2

看起来你正在使用一种符合CSS2标准的浏览器打印页面

http://www.alistapart.com/articles/goingtoprint/

在完全符合CSS2标准的浏览器中，我们可以在每个链接后插入URL，从而使得这些链接对于那些拥有打印副本和网络浏览器的人非常有用。以下是该规则，它将此效果限制在“content”div中，从而避免将URL粘贴在页眉中：

#content a:link:after, #content a:visited:after {    
  content: " ("attr(href) ") ";    
  font-size: 90%;   
}

尝试在基于Gecko的浏览器中运行，例如Mozilla或Netscape 6.x。在打印输出中的每个链接后面，您应该看到链接的URL地址（用括号括起来）。

- mplungjan

---

我理解 - 但您所描述的行为是明确放置在您查看的页面中的。如果要避免该页面上的此行为，请删除它（如果这是您自己的页面），如果不是，则可以在浏览器中使用 userCSS。 - mplungjan

代码在Firefox上没有显示出来，但我决定开始关闭我启用的不同模块（这是一个Drupal系统），结果发现一个模块注入了一个包含该代码的print.css文件。非常感谢。 - Adirael

太好了 - 谢谢你的问题 - 它向我展示了CSS2中我不知道的东西 :) - mplungjan

这是代码相关的内容，如果有人想查看，可以在此处找到：http://drupal.org/files/issues/print.css_.txt，该链接来源于http://drupal.org/node/116482，有趣的是它引用了我的listapart链接。 - mplungjan

Answer 3

内容：" "；不起作用。我使用的是：

@media print {
    .noprint {display:none !important;}
    a:link:after, a:visited:after {  
      display: none;
      content: "";    
    }
}

这可以起到禁用的作用！

- Dajo

---

在Firefox 29中可以工作，但在Chrome 35中无法工作。 - Jeroen K

在 Chrome 版本 94.0.4606.81 (官方版本) (64 位元) 上工作过。 - Jimson James

Answer 4

目前在所有主流浏览器中，使用content属性应该是有效的。

    @media print  - or -  <style type="text/css" media="print">

    a:link:after, a:visited:after {  
        content: normal; //TODO: add !important if it is overridden  
    }

更多选项请参考：CSS内容。

使用内容属性的更多有用方法请参考：CSS技巧

- tgursk

Answer 5

我发现其他解决方案在跨浏览器上不再起作用。以下解决方案适用于Firefox 29，Chrome 35和IE 11：

a:link:after, a:visited:after {  
  content: normal !important;  
}

- Jeroen K

---

很遗憾，看起来提问者不再使用SO了，但这应该是被接受的答案。 - kalenpw

Answer 6

我的应用服务器(rails)要求我使用父级选择器。 body 元素非常适合选择整个页面。

body a:link:after, body a:visited:after {    
  content: "";
}

- coloradoblue

Answer 7

对于使用Bootstrap 3的任何人，所使用的选择器为：

a[href]:after { }

可以通过以下方式进行覆盖：

a[href]:after {
   content: initial;
}

- Mike Chelen

Answer 8

添加这个将帮助您删除那些不需要的链接

<style type="text/css" media="print">
@page 
{
    size: auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}

阅读这篇文章将有所帮助

- Rudias

Answer 9

虽然有许多CSS选项被建议，但如果您希望摆脱在每个页面上强制显示的页眉/页脚中的链接和标题，则有一个适合您的设置。如下所示。

就是这样。

- Mohd Abdul Mujib

---

这个问题涉及到在打印时删除与网页主体中导航元素相关联的超链接。这是一个完全独立的问题，与页眉/页脚中的文件路径无关，这些路径是为了打印而添加的，可以关闭。 - code-sushi

@code-sushi，你是正确的，我误解了问题，但我还是会保留我的答案，因为它可能对正在寻找删除页眉和页脚链接的人有帮助，因为问题描述可能相关。 - Mohd Abdul Mujib

Answer 10

使用附加的 CSS 进行打印。

请参见此处: http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

- Mchl

---

但根据所描述的，正在打印的页面已经设置为打印HREFS。如果提问者可以控制CSS，那么可以删除href CSS而不是应用特定的样式表。但是，某些浏览器可以通过用户CSS覆盖CSS。 - mplungjan