html - 打印页面时的样式问题

Question

我在想要显示页面的打印预览时遇到问题。这是它在浏览器中的样子。

这就是我将要打印的上一张图像可视化时的样子。

这些是我使用的样式。并用“media = 'print'”进行探测。还添加!重要的;在样式的末尾

<!-- Latest Bootstrap min CSS -->
    <link rel="stylesheet" href="/REDRIM/assets/bootstrap/css/bootstrap.min.css">       
    <!-- Google Font -->
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>      
    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="/REDRIM/assets/fonts/font-awesome.min.css">
    <!-- magnific popup CSS --> 
    <link rel="stylesheet" href="/REDRIM/assets/css/magnific-popup.css">
    <!-- timeline CSS -->   
    <link rel="stylesheet" href="/REDRIM/assets/css/timeline.css">  
    <!-- animate CSS -->        
    <link rel="stylesheet" href="/REDRIM/assets/css/animate.css">       
    <!-- Style CSS -->
    <link rel="stylesheet" href="/REDRIM/assets/css/style.css">     
    <link rel="stylesheet" href="/REDRIM/assets/css/responsive.css">
    <link rel="stylesheet" href="/REDRIM/assets/bootstrap/css/print.css" media="print">

我想要的是去掉标签上出现的链接

 a{outline: none !important;
    color: #337ab7;
    text-decoration: none;
    background-color: transparent;}

试试下面的样式，但是我在生成预览打印的时候链接还是出现了。

Answer 1

您的样式表中可能有一些内容告诉它打印括号中的链接。删除如下所示的代码:

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

或者你可以用这个覆盖它:

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