Firefox打印HTML页面切断内容
Firefox打印HTML页面切断内容
提问于 2014-11-06 11:18:32
我有一个html页面，我想用浏览器打印。在IE9和Chrome中，一切正常工作，但在火狐上，页面被切断。参见HTML：
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.grid {
list-style: none;
margin-left: -20px;
}
.grid > .col-1-3, .grid > .col-2-6, .grid > .col-4-12 {
width: 33.33333%;
}
.col {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
margin-right: -.25em;
min-height: 1px;
padding-left: 20px;
vertical-align: top;
}
</style>
</head>
<body>
<div id="container">
<div id="middle">
<div class="grid">
<main class="col col-2-3" id="main">
<article>
<h1>Page Title</h1>
<div class="sec">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
<div class="grid sec">
<div class="col col-2-3">
<h2>LEFT TITLE</h2>
<table>
<tbody>
<tr>
<td class="text-right" >40</td>
<th>g</th>
<th>
<a href="#">Foo</a>
</th>
</tr>
<tr>
<td class="text-right" >40</td>
<th>g</th>
<th>
<a href="#">Ba</a>
</th>
</tr>
<tr>
<td class="text-right" data-amount="4">4</td>
<th>kg</th>
<th>
<a href="#">Trallala</a>
</th>
</tr>
<tr>
<td class="text-right" data-amount="200">200</td>
<th>g</th>
<th>
<a href="#">Bla</a>
</th>
</tr>
<tr>
<td class="text-right" data-amount="300">300</td>
<th>ml</th>
<th>
<a href="#">Blub</a>
</th>
</tr>
</tbody>
</table>
</div>
<div class="col col-1-3 recipe-rightbar">
<div>
<h2>RIGHT SIDEBAR Title</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
</ul>
<div>
<h2> RIGHT SIDEBAR Title</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
</ol>
</div>
<div>
<h2> RIGHT SIDEBAR Title</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
</ol>
</div>
</div>
</div>
</div>
<section class="sec ">
<h2>Title</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eosrebum.</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscingeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. adsadasd</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</li>
<li>Lorem ipsum dolor sit amet, nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitd tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</li>
<li>Lorem ipsum dolor sit aur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</li>
</ol>
</section>
<section>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</section>
</article>
</main>
</div>
</body>
</html>有谁知道如何解决这个问题吗？
我已经尝试设置每个元素可见的溢出：
* {
overflow: visible;
}但这并没有解决问题。
我在Firefox33、IE9和Chrome38中测试了代码，但是只有火狐没有打印页面。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-11-08 01:33:28
问题是display: inline-block;位，有很多方法来解决css的问题，我不知道最终结果应该是什么样子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26778158
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号