La dimensione elemento Div cambia durante la stampa in Chrome

Question

Sto scrivendo una pagina che deve essere stampata e lo stile è diverso dal resto delle pagine nella mia applicazione. In sostanza sto cercando di creare una carta wallet con le informazioni di accesso per un utente da stampare, tagliare e conservare con loro.

Ho provato a stampare solo la mia scheda di accesso con chrome e IE. IE è perfetto, ma il cromo purtroppo rende la carta troppo grande. Non sono sicuro che sia importante (non sono un esperto di CSS) ma ho provato a utilizzare unità diverse; pollici, pixel e punti.

Quando utilizzo gli strumenti di sviluppo in chrome, vedo che i pixel sono calcolati correttamente. Ho controllato per vedere se il browser aggiungeva padding aggiuntivo all'interno del div.

Ecco cosa ho per gli elementi della scheda di accesso.

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

Ecco il mio stile CSS. Sto cercando di ottenere una dimensione fisica di 3,5 "x 2", che è una dimensione standard del biglietto da visita degli Stati Uniti.

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

Naturalmente, preferirei avere una soluzione cross browser per questo, dove non devo usare un sacco di regole di stile specifiche del browser, ma che potrebbe non essere possibile in questo caso.

Ho bisogno di una sorta di ripristino CSS per dimensionarlo correttamente per la stampa con qualsiasi browser?

UPDATE

Chrome rende il mio HTML come un documento PDF quando viene stampato. Ho notato che la finestra di dialogo di stampa in chrome è semplicemente una finestra modale in cima alla pagina. Ho controllato gli elementi negli strumenti di sviluppo e l'anteprima di stampa è un documento pdf. L'html fornisce l'URL di origine (chrome: //my_path/print.pdf) che è il documento completo stampato da una stampante.

COSÌ, per farla breve; il mio problema sembra essere come chrome rende il mio html come pdf. C'è un modo per controllare come renderizza l'html o magari qualche CSS cromato che potrei usare?

Answer 1

Prova la specifica di stampa @media nel tuo CSS. Chrome probabilmente sostituisce il CSS su schermo con CSS di stampa che adatta gli elementi alla pagina stampata.

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

Penso che questo sia più probabile che sia il problema di quello che Chrome sta traducendo in pdf.