CSS 在 Chrome 中打印时需要删除 href 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7301989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Need to remove href values when printing in Chrome
提问by Chris Gratigny
I'm attempting to customize the print CSS, and finding that it prints links out with the hrefvalue as well as the link.
我正在尝试自定义打印 CSS，并发现它打印出带有href值和链接的链接。
This is in Chrome.
这是在 Chrome 中。
For this HTML:
对于此 HTML：
<a href="http://www.google.com">Google</a>
It prints:
它打印：
Google (http://www.google.com)
And I want it to print:
我希望它打印：
Google
回答by Alex Ghiculescu
Bootstrap does the same thing (... as the selected answer below).
Bootstrap 做同样的事情（......作为下面选择的答案）。
@media print {
a[href]:after {
content: " (" attr(href) ")";
}
}
Just remove it from there, or override it in your own print stylesheet:
只需从那里删除它，或在您自己的打印样式表中覆盖它：
@media print {
a[href]:after {
content: none !important;
}
}
回答by Eric
It doesn't. Somewhere in your print stylesheet, you must have this section of code:
它没有。在你的打印样式表的某个地方，你必须有这部分代码：
a[href]::after {
content: " (" attr(href) ")"
}
The only other possibility is you have an extension doing it for you.
唯一的另一种可能性是你有一个扩展为你做这件事。
回答by JELEWA.de
@media print {
a[href]:after {
display: none;
visibility: hidden;
}
}Work's perfect.
工作完美。
回答by Wang Jijun
If you use the following CSS
如果您使用以下 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" />
just change it into the following style by adding media="screen"
只需通过添加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" />
I think it will work.
我认为它会起作用。
the former answers like
以前的答案像
@media print {
a[href]:after {
content: none !important;
}
}
were not worked well in the chrome browse.
在 chrome 浏览器中效果不佳。
回答by TrampGuy
I encountered a similar problem only with a nested img in my anchor:
我仅在锚点中使用嵌套 img 时遇到了类似的问题：
<a href="some/link">
<img src="some/src">
</a>
When I applied
当我申请
@media print {
a[href]:after {
content: none !important;
}
}
I lost my img and the entire anchor width for some reason, so instead I used:
由于某种原因，我丢失了我的 img 和整个锚点宽度，所以我使用了：
@media print {
a[href]:after {
visibility: hidden;
}
}
which worked perfectly.
效果很好。
Bonus tip: inspect print preview
额外提示：检查打印预览
回答by Abd Abughazaleh
To hide Page url .
隐藏页面 url 。
use media="print"in style tage example :
使用media="print"在风格踏歌例如：
<style type="text/css" media="print">
@page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
@page { size: portrait; }
</style>
If you want to remove links :
如果要删除链接：
@media print {
a[href]:after {
visibility: hidden !important;
}
}
回答by Wen Xin
For normal users. Open the inspect window of current page. And type in:
对于普通用户。打开当前页面的检查窗口。并输入：
l = document.getElementsByTagName("a");
for (var i =0; i<l.length; i++) {
l[i].href = "";
}
Then you shall not see the url links in print preview.
那么您将不会在打印预览中看到 url 链接。
