9

印刷用のページを書いていますが、スタイルがアプリケーションの残りのページとは異なります。基本的に、ユーザーが印刷、カット、保管するためのログイン情報を含むウォレット カードを作成しようとしています。

ChromeとIEでログインカードを印刷しようとしただけです。IE は完全に取得しますが、残念ながら chrome ではカードが大きくなりすぎます。問題があるかどうかはわかりませんが (私は CSS の専門家ではありません)、別の単位を使用してみました。インチ、ピクセル、およびポイント。

Chrome で開発者ツールを使用すると、ピクセルが正しく計算されていることがわかります。ブラウザがdiv内に追加のパディングを追加しているかどうかを確認しました。

ログインカード要素については、次のとおりです。

<div id="divLoginCard">
    <div id="divLoginCardHeader">
        <h3>User Login - <span id="spnUserName"></span></h3>
    </div>
    <div id="divLoginCardContent">
        <div class="fieldRow">
            <span class="fieldLabel">Website:</span>
            <span class="fieldValue">http://www.xxx.zzz</span>
        </div>
        <div class="fieldRow">
            <span class="fieldLabel">ID:</span>
            <span class="fieldValue" id="spnUserID"></span>
        </div>
        <div class="fieldRow">
            <span class="fieldLabel">Contact's Name:</span>
            <span class="fieldValue" id="spnContactsName"></span>
        </div>        
    </div>
</div>

これが私のCSSスタイリングです。標準的な米国の名刺サイズである 3.5 インチ x 2 インチの物理サイズを達成しようとしています。

#divLoginCard
{
    margin:0 auto;
    width:252pt;
    height:144pt;
    border-style:dashed;
    border-color:gray;
}

#divLoginCardHeader
{
    text-align:center;
}

#divLoginCardContent
{
    margin-left:25px;
    margin-right:15px;
    padding-top:15px;
}

.fieldRow
{
    margin-bottom: 3px;
    display: table;
    width: 100%;
}

.fieldLabel
{
    font-weight: bold;
    width: 96px;
    text-align: left;
    display: table-cell;
}

.fieldValue
{
    min-width: 100%;
    display: table-cell;
    word-wrap: break-word;
    width: 200px;
}

body
{
    font-family:Arial;
}

当然のことながら、ブラウザー固有のスタイル ルールを多く使用する必要のない、クロス ブラウザー ソリューションを使用したいと思いますが、この場合は不可能かもしれません。

どのブラウザでも印刷できるように適切なサイズにするには、何らかの CSS リセットが必要ですか?

アップデート

Chrome は、印刷時に HTML を PDF ドキュメントとしてレンダリングします。Chrome の印刷ダイアログは、ページ上部の単なるモーダル ウィンドウであることに気付きました。開発者ツールで要素をチェックアウトしましたが、印刷プレビューは PDF ドキュメントです。html は、プリンターによって印刷される完全なドキュメントであるソース URL (chrome://my_path/print.pdf) を提供します。

そう、簡単に言えば。私の問題は、クロムが私のhtmlをpdfとしてレンダリングする方法のようです。html をレンダリングする方法を制御する方法、または使用できるクロムに適した CSS を制御する方法はありますか?

4

1 に答える 1

1

CSS で @media 印刷仕様を試してください。Chrome はおそらく、印刷ページに合わせて要素のサイズを変更する印刷 CSS で画面上の CSS を上書きしています。

@media print { 
   /* put your fixes here */
}

Chromeがpdfに変換しているよりも、これが問題である可能性が高いと思います。

于 2013-04-10T17:58:34.777 に答える