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