5

私のウェブサイトは正常に動作していますが、[ファイル] > [ブラウザーで印刷] (ブラウザーの印刷プレビュー) をクリックすると、すべての CSS がめちゃくちゃになり、背景色が空白に置き換えられ、プレビュー ページにロゴが表示されません。

したがって、印刷プレビュー用の CSS ファイルを作成する方法と、ユーザーが印刷をクリックしたときに呼び出す方法です。

4

5 に答える 5

14

このエラーが発生しているものに対応するマークアップを提供する必要があります..

情報: ブラウザのデフォルトでは印刷されません。ブラウザでそのオプションを有効background colorにする必要があります。

念のため、使用している場合

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

これを次のように置き換えmedia=screen, printて、Web サイトと印刷にルールを適用します。

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

次のような印刷固有のスタイルシートを使用することもできます。

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

@media印刷固有のクエリを使用することもできます

@media print {
 /* Whatever */
}

最後になりましたが、ブラウザで印刷を有効にするには:

Firefox : alt をクリックします (ブラウザのメニュー バーが非表示の場合) - ファイル - ページ設定 - 目盛り印刷の背景

Chrome : Chrome での印刷を有効にするには、この CSS プロパティを使用します-webkit-print-color-adjust:exact;

于 2012-10-04T07:31:57.553 に答える
5

印刷用のスタイルシートを作成する

<!-- Main stylesheet on top -->
<link rel="stylesheet" type="text/css" href="/global.css" mce_href="/global.css" href="/global.css" mce_href="/global.css" media="all" />
<!-- Print only, on bottom -->
<link rel="stylesheet" type="text/css" href="/print.css" mce_href="/print.css" href="/print.css" mce_href="/print.css" media="print" />

印刷版では不要な要素を表示しない

Web 訪問者がページを印刷するのは、Web サイト上のサポート画像を見るためではなく、その内容のためです。no-print というクラスを作成し、そのクラス宣言を DIVS、画像、および print 値を持たないその他の要素に追加します。

.no-print { 
   display:none; 
}

<!-- Example -->
<div id="navigation" class="no-print">
   <!-- who needs navigation when you're looking at a printed piece? -->
</div>

チップ

  • 不要な HTML テーブルを避ける
    Web サイトのコンテンツ領域を制御することは、ページ構造がテーブルに閉じ込められている場合、非常に困難になる可能性があります。
  • 改ページを使用する ブラウザーの改ページは、特に動的に作成されるページのコンテンツの長さが可変であることを考えると、Microsoft Word の場合ほど信頼性が高くありませんが、うまく利用すると、Web サイトの印刷ですべてが異なります。
  • 印刷用にページのサイズを変更する 明らかに、コンピューター モニターはページを表示するために大きな幅を提供できますが、コンテンツ領域の幅を 600px に設定することをお勧めします。

デビッド・ウォルシュによって書かれた

于 2012-10-04T07:51:01.073 に答える
2

エイリアン氏は、背景色が表示されなかった理由をすでに回答しています（これは背景ロゴにも当てはまります）。しかし、あなたは「CSSが台無しになっている」と述べました。

HTMLページの場合、覚えておくべき簡単なことがあります。それらを印刷しないでください。少なくとも、通常のグラフィックベースのページではありません。ルートを印刷したい場合、Googleが特別なバージョンの地図を提供していることに気づいたことがありますか？また、検索結果やルートを提供する他のほとんどすべてのページには、印刷用の特別な機能もあります。ウィキペディアでさえ、すべての記事の印刷可能なバージョンがあります。これらは、ページナビゲーションや背景画像などの不要な詳細がなく、非常にシンプルなレイアウトを提供します。

この理由は？印刷メディアのCSSは非常に混乱しています。非常に基本的なレイアウトに固執し、気を散らすようなグラフィックをあまり使用せずに、最も必要な情報を提供します。そして、あなたが本当にウェブサイトの印刷可能なバージョンを提供する必要があるならば、PDFを準備してください。他のすべてはただのマゾヒズムです。

于 2012-10-04T07:39:43.783 に答える
0

これを試してみてください、これがあなたに役立つことを願っています

mozillaブラウザで、[ファイルページの設定]-[フォーマットとオプション]タブをクリックします。[背景の印刷]オプションをオンにして、[OK]をクリックします。

今すぐ印刷を確認してください

于 2012-10-04T07:39:20.893 に答える