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

更新

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 更可能是问题。