在Chrome中打印时需要删除href值

Question

我正在尝试自定义打印CSS,并发现它打印出带有href值和链接的链接.

这是在Chrome中.

对于这个HTML:

<a href="http://www.google.com">Google</a>

它打印:

Google (http://www.google.com)

我希望它打印:

Google

Answer 1

Bootstrap做同样的事情(......如下面的选定答案).

@media print {
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

只需从那里删除它,或在您自己的打印样式表中覆盖它:

@media print {
  a[href]:after {
    content: none !important;
  }
}

Answer 2

它没有.在打印样式表的某处,您必须具有以下代码段:

a[href]::after {
    content: " (" attr(href) ")"
}

唯一的另一种可能性是你有一个扩展为你做.

Answer 3

@media print {
   a[href]:after {
      display: none;
      visibility: hidden;
   }
}

工作完美.

Answer 4

如果您使用以下CSS

<link href="~/Content/common/bootstrap.css" rel="stylesheet" type="text/css"    />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" type="text/css" />

只需添加media ="screen"将其更改为以下样式

<link href="~/Content/common/bootstrap.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" **media="screen"** type="text/css" />

我认为它会起作用.

前者的答案就像

    @media print {
  a[href]:after {
    content: none !important;
  }
}

在Chrome浏览器中效果不佳.

Answer 5

我仅在锚点中使用嵌套 img 时遇到了类似的问题：

<a href="some/link">
   <img src="some/src">
</a>

当我申请

@media print {
   a[href]:after {
      content: none !important;
   }
}

由于某种原因，我丢失了我的 img 和整个锚点宽度，所以我使用了：

@media print {
   a[href]:after {
      visibility: hidden;
   }
}

效果很好。

额外提示：检查打印预览