在Chrome中打印时,Div元素大小会发生变化

Question

我正在编写一个打印页面,样式与我的应用程序中的其他页面不同.基本上我正在尝试创建一个带有登录信息的钱包卡,供用户打印,剪切和保存.

我只尝试使用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重置才能正确调整大小以便使用任何浏览器进行打印？

UPDATE

Chrome在打印时将html呈现为PDF文档.我注意到chrome中的打印对话框只是页面顶部的模态窗口.我检查了开发人员工具中的元素,打印预览是一个pdf文档.html提供源URL(chrome://my_path/print.pdf),它是打印机打印的完整文档.

所以,长话短说; 我的问题似乎是chrome如何将我的html呈现为pdf.有没有办法控制它如何呈现html或者我可以使用的一些chrome友好的CSS？

Answer 1

尝试在 CSS 中使用 @media print 规范。Chrome 可能会使用打印 CSS 来覆盖屏幕上的 CSS，打印 CSS 会调整元素大小以适合打印页面。

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

我认为这比 Chrome 翻译成 pdf 更有可能是问题。