我陷入了困境,SO 档案对我没有帮助。也许我找错地方了。这是短篇故事:
- 我有一个需要打印在整页上的视图。我不能有第二页,并且我需要它在页面上尽可能大。
- 解决方案必须具有合理的跨浏览器兼容性(IE9+、Safari、Chrome、FF)。
- 我已经有了一个 PDF 解决方案,但我还需要一个普通的打印解决方案。
- 该页面是用 Bootstrap 构建的,但我已经覆盖了大多数打印类。
HTML 页面的结构如下。我添加了一些内联 CSS 来自定义其中一些信息。
<div class="container">
<div class="row">
<div class="span16">
<style type="text/css" media="all">
@media print {
html, body {
margin: 0;
padding: 0;
background: #FFF;
font-size: 9.5pt;
}
.container, .container div {
width: 100%;
margin: 0;
padding: 0;
}
.template { overflow: hidden; }
img { width: 100%; }
}
</style>
<div class="template_holder">
<div class="template">
<img src="some_big_image">
<div>
[PLAIN TEXT IN HERE, POSITION:ABSOLUTE OVER THE IMAGE]
</div>
</div>
</div>
</div>
</div>
</div>
我意识到在这里包含内联 CSS 的形式有点糟糕,但由于各种原因它必须覆盖它之前的一堆其他 CSS。我可以把它拉回来,但要点是这样的。当我打印时,我得到看起来正确的东西,再加上额外的第二页。当我缩小图像时,一切正常,但我需要图像来填充 DIV。
我认为将宽度设置为 100% 是问题所在,但我确保图像长宽比小于页面(即使有任何边距)。基本上,全宽图像不应导致分页。我做错了什么以及我需要改变什么?任何帮助将不胜感激...
我认为 CSS 的这个细节令人沮丧的是,答案必须适合我自己的项目。感谢@blahdiblah 和其他人的建议。多种解决方案的结合带来了近乎完美的结果,当然 IE 仍然给我带来了问题......
它与所有填充/边距样式的硬重置有关,然后是很多!important
用于填充、宽度、高度等的标记。基本上,我用高度填充页面,然后放入 100% 宽的对象。结果是 8.5x11 页面上的最大覆盖范围,而到第二页的溢出为零。
@media print {
* { margin: 0 !important; padding: 0 !important; }
#controls, .footer, .footerarea{ display: none; }
html, body {
/*changing width to 100% causes huge overflow and wrap*/
height:100%;
overflow: hidden;
background: #FFF;
font-size: 9.5pt;
}
.template { width: auto; left:0; top:0; }
img { width:100%; }
li { margin: 0 0 10px 20px !important;}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)