Chromeで印刷するとdiv要素のサイズが変更される

Question

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

クロムとIEでログインカードを印刷しようとしました。 IEは完璧だが、残念ながらクロムはカードを大きすぎるものにする。問題があるかどうかは分かりません（私はCSSの専門家ではありません）が、別のユニットを使用しようとしました。インチ、ピクセル、およびポイント。

クロムで開発ツールを使用すると、ピクセルが正しく計算されていることがわかります。私は、ブラウザが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リセットが必要ですか？それが印刷されたとき

UPDATE

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

SO、long story short;私の問題は、chromeが私のhtmlをpdfとしてレンダリングする方法であるようです。どのようにhtmlをレンダリングするか、あるいは私が使うことができるクロムフレンドリーなCSSをレンダリングする方法を制御する方法はありますか？

Answer 1

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

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

これは、Chromeがpdfに翻訳するよりも問題になる可能性が高いと思います。