在Chrome中打印時div元素大小發生變化

我正在編寫一個打印頁面，其樣式與我的應用程序中的其餘頁面不同。基本上，我試圖創建一個包含登錄信息的錢包卡，以便用戶打印，剪切並保留它們。在Chrome中打印時div元素大小發生變化

我只試過用鉻和IE打印我的登錄卡。 IE得到它完美，但不幸的是，鉻使卡太大。不知道它是否重要（我不是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重置才能正確調整此大小以適用於任何瀏覽器打印？

UPDATE

Chrome的渲染我的HTML爲PDF文檔打印時。我注意到，chrome中的打印對話框只是頁面頂部的模式窗口。我檢查了開發人員工具中的元素，打印預覽是一個pdf文檔。 html提供了源URL（chrome：//my_path/print.pdf），它是由打印機打印的完整文檔。

SO，長話短說;我的問題似乎是鉻如何呈現我的HTML爲PDF格式。有沒有辦法控制它如何呈現html或者我可以使用的一些Chrome友好的CSS？

來源

2013-01-24 jlafay

1）我會推薦CSS重置。 2）僅在打印時卡片是否太大，或者屏幕上的Chrome卡片太大？ 3）我會建議嘗試'毫米'的尺寸測量，而不是'PT'（我注意到Chrome的「PT」似乎比IE9大1.7倍）。 – Sean

你有沒有得到這個解決？我有同樣的問題。 –

@KevinSwarts，遺憾的是沒有。我最終在服務器上生成了pdf文檔，並將其發送給客戶端進行打印。這是我能保持一致的唯一方法。這不是我的首選解決方案，但這是我必須做的。 – jlafay

試試CSS中的@media打印規範。 Chrome可能會使用打印CSS來覆蓋屏幕上的CSS，從而將元素大小設置爲適合打印頁面。

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

我認爲這個問題比Chrome翻譯成pdf更可能是問題。

來源

2013-04-10 17:58:34 Deborah

謝謝您的建議，但將我的樣式放置在媒體打印塊中也不起作用。 – jlafay

在Chrome中打印時div元素大小發生變化

回答

相關問題