我正在编写一个要打印的页面,并且样式与我的应用程序中的其他页面不同。本质上,我正在尝试创建一个带有登录信息的钱包卡,供用户打印、剪切并随身携带。
我只试过用 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?
最佳答案
尝试在您的 CSS 中使用@media 打印规范。 Chrome 可能会用打印 CSS 覆盖您的屏幕 CSS,打印 CSS 调整元素的大小以适合打印页面。
@media print {
/* put your fixes here */
}
我认为这比 Chrome 正在转换为 pdf 更可能是问题。
关于css - 在 Chrome 中打印时 Div 元素大小发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14511542/