1

我的网页上有以下 HTML：

<div id=header>
   <a href="/" id="logo" name="logo"><span class="hide">FooBar</span></a>
      <div id="topnavmenu">
         <ul id="nav-utility">
            <li><a href="/careers">Careers</a></li>
            <li><a href="/blog">Blog</a></li>
            <li><a href="/test4/">Test4</a></li>
            <li><a href="/program">Program</a></li>
            <li><a href="/contact">Contact Us</a></li>
         </ul>
      </div>
</div>

当我打印页面时，我得到：

(/)   Careers (/careers)   Blog(/blog)   Test4(/test4) ....

问题：

  1. 未显示徽标图像。在屏幕上工作正常
  2. 为什么我会在父母中打印href？我该如何抑制这个？

这是使用引导程序，但我不确定引导程序是否是罪魁祸首。

谢谢，

磷

4

4 回答 4

2

如何在印刷版中抑制来自父母的href。

这些 href 是 Bootstrap 的功能。如果您查看 Bootstrap CSS，您会发现：

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

abbr[title]:after{
    content:" (" attr(title) ")"
}

这就是问题。如果您有权访问 Bootstrap，则可以将其删除。否则，只需将其压制为您自己的 CSS：

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

abbr[title]:after{
    content:"";
}

您甚至可以添加!important到每一行。

a[href]:after{
    content:"" !important;
}

abbr[title]:after{
    content:"" !important;
}
于 2014-01-10T19:39:07.067 回答
2

编写 print css 时要记住的事情：-

  1. 我们不需要导航来在纸上浏览 - 所以从打印中隐藏导航。
  2. 删除横幅，广告任何不需要的图像。
  3. 字体大小应缩放到眼睛可见且不是很大的好数字。
  4. 不打印背景图像。保持白色。

您将不得不使用 CSS 媒体样式来提供打印某些区域的细节。好的做法是使用包含所有打印 css 的单独样式表，例如：

<link rel="stylesheet" type="text/css" media="print" href="print.css">

比在 print.css 中编写你的 CSS 样式，如下所示

@media print {
/* your stylesheet for printing, eg.: */
   body {
           color : #000000;
           background : #ffffff;
           font-family :"Times New Roman", Times, serif;
           font-size : 12pt;
        }
  a {
           text-decoration : underline;
           color : #ddd;
    }
 #topnavmenu {
          display : none;
    }
   #logo {
       height:20px;
       margin-top:10px;

    }
}

Bootstrap css 不是罪魁祸首，因为它使用 media="screen" 属性指定，这就是为什么它只会影响屏幕而不影响打印的原因。

 <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

另一种方法是分配MEDIA="screen, print"给引导文件。但是，只有当您想完全按照桌面上显示的方式打印您的网站时，才建议这样做。“So Save Trees”，只打印那些绝对必要的区域。将 media="screen,print" 分配给引导 css 的示例：

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen,print">
于 2013-02-19T03:32:43.763 回答
1

除了上面的建议，请记住，如果打印结果对您很重要，那么这就是打印样式表的用途。

在文档的头部包含对样式表的引用： 

<link rel="stylesheet" href="URL to your print.css" type="text/css" media="print" />

然后根据需要设置样式。

例如，如果您想在打印页面时隐藏菜单，请包括以下内容： 

#topnavmenu{
display:none;
}

这是一个很好的链接，可以帮助您开始设置打印样式表的样式：http:
//alistapart.com/article/goingtoprint

希望这可以帮助！

于 2013-02-19T03:39:56.913 回答
1

  1. 背景图像通常不打印。

  2. 你不能用代码。您必须在打印选项对话框中进行调整。

于 2013-02-19T01:04:56.993 回答