1

Web ページに次の 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 が親に出力されるのはなぜですか? これを抑えるにはどうすればよいですか？

これはブートストラップを使用していますが、ブートストラップが原因かどうかはわかりません。

ありがとう、

P

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 メディア スタイルを使用して、特定の領域を印刷するための仕様を提供する必要があります。

<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;

    }
}

ブートストラップ css は原因ではありません。これは media="screen" 属性で指定されているため、 print ではなく画面にのみ影響します。

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

MEDIA="screen, print"もう 1 つの方法は、ブートストラップ ファイルに割り当てることです。ただし、これは、ウェブサイトをデスクトップで表示されるとおりに印刷したい場合にのみお勧めします。「So Save Trees」を実行して、絶対に必要な領域のみを印刷します。ブートストラップ css に media="screen,print" を割り当てる例:

<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 に答える