打印页面时出现样式问题

时间:2016-09-28 17:18:59

标签: html css css3

想要显示页面的打印预览时出现问题。这就是它在浏览器中的外观。

enter image description here

这就是我对我想要打印的上一张图像进行虚拟化时的样子。

enter image description here

这些是我使用的样式。并使用" 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;}

尝试以下样式,但在生成要打印的预览时仍会链接。

1 个答案:

答案 0 :(得分:1)

您的样式表中可能有一些内容告诉它使用括号中的链接进行打印。删除看起来像这样的代码:

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

或者你可以用它来覆盖它:

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