Bootstrap 3.x印刷プレビュー背景色と文字表示異常の解決

3023 ワード

まず、印刷プレビューで背景色が表示されないコードをテストしました.




 
 Regonline
 
 




 
  
  

比较奇怪的是,如果我删除bootstrap的样式引用,就可以正常打印预览了。想来必定是bootstrap3 设置了@media print相关属性导致。

果然,翻开源码,发现如下代码:


@media print {
 * {
 color: #000 !important;
 text-shadow: none !important;
 background: transparent !important;
 box-shadow: none !important;
 }
 a,
 a:visited {
 text-decoration: underline;
 }
 a[href]:after {
 content: " (" attr(href) ")";
 }
 abbr[title]:after {
 content: " (" attr(title) ")";
 }
 a[href^="javascript:"]:after,
 a[href^="#"]:after {
 content: "";
 }
 pre,
 blockquote {
 border: 1px solid #999;

 page-break-inside: avoid;
 }
 thead {
 display: table-header-group;
 }
 tr,
 img {
 page-break-inside: avoid;
 }
 img {
 max-width: 100% !important;
 }
 p,
 h2,
 h3 {
 orphans: 3;
 widows: 3;
 }
 h2,
 h3 {
 page-break-after: avoid;
 }
 select {
 background: #fff !important;
 }
 .navbar {
 display: none;
 }
 .table td,
 .table th {
 background-color: #fff !important;
 }
 .btn > .caret,
 .dropup > .btn > .caret {
 border-top-color: #000 !important;
 }
 .label {
 border: 1px solid #000;
 }
 .table {
 border-collapse: collapse !important;
 }
 .table-bordered th,
 .table-bordered td {
 border: 1px solid #ddd !important;
 }
}

コードのcolor:#000 !important; およびbackground-color:transparent !important; に注意してください.これは、印刷時にページのテキストが黒で、背景色が透明に設定されていることを示します.このようなスタイルがあるので、背景色を印刷します.
出てこない.この2つのコードを削除して、すべてOK!
特筆すべきは、ページにハイパーリンクがある場合、印刷時にハイパーリンクのアドレスが表示されるので、見にくいということです.対応するスタイルを削除すればいいです.
まとめ
以上はこの文章のすべての内容で、本文の内容がみんなの学习あるいは仕事に対して一定の助けをもたらすことができることを望んで、もし疑问があればみんなは伝言を残して交流することができます.