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

更新

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

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

Answer 1

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

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

我认为这可能是问题，而不是Chrome正在转换为pdf。

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

1 个答案: