在Chrome中打印时div元素大小发生变化

我正在编写一个打印页面，其样式与我的应用程序中的其余页面不同。基本上，我试图创建一个包含登录信息的钱包卡，以便用户打印，剪切并保留它们。在Chrome中打印时div元素大小发生变化

我只试过用铬和IE打印我的登录卡。 IE得到它完美，但不幸的是，铬使卡太大。不知道它是否重要（我不是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），它是由打印机打印的完整文档。

SO，长话短说;我的问题似乎是铬如何呈现我的HTML为PDF格式。有没有办法控制它如何呈现html或者我可以使用的一些Chrome友好的CSS？

来源

2013-01-24 jlafay

1）我会推荐CSS重置。 2）仅在打印时卡片是否太大，或者屏幕上的Chrome卡片太大？ 3）我会建议尝试'毫米'的尺寸测量，而不是'PT'（我注意到Chrome的“PT”似乎比IE9大1.7倍）。 – Sean

你有没有得到这个解决？我有同样的问题。 –

@KevinSwarts，遗憾的是没有。我最终在服务器上生成了pdf文档，并将其发送给客户端进行打印。这是我能保持一致的唯一方法。这不是我的首选解决方案，但这是我必须做的。 – jlafay

试试CSS中的@media打印规范。 Chrome可能会使用打印CSS来覆盖屏幕上的CSS，从而将元素大小设置为适合打印页面。

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

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

来源

2013-04-10 17:58:34 Deborah

谢谢您的建议，但将我的样式放置在媒体打印块中也不起作用。 – jlafay

在Chrome中打印时div元素大小发生变化

回答

相关问题