本文介绍了Firefox Print HTML 页面截断内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个 html 页面，我想用浏览器打印.在 IE9 和 Chrome 中，一切正常，但在 Firefox 上，页面被切断.见 HTML:
<html lang="de"><头><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><风格>.网格 {列表样式:无；左边距:-20px；}.grid >.col-1-3, .grid >.col-2-6, .grid >.col-4-12 {宽度:33.33333%；}.col{-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；显示:内联块；右边距:-.25em；最小高度:1px；padding-left: 20px;垂直对齐:顶部；}</风格><身体><div id="容器"><div id="中间"><div class="grid"><main class="col col-2-3" id="main"><文章><h1>页面标题</h1><div class="sec"><p>Lorem ipsum dolor sat amet、consetetur sadipscing elitr、sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyamerat、sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.
<section class="sec "><h2>标题</h2><ol><li>Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam voluptua.在 vero eosrebum.</li><li>Lorem ipsum dolor sat amet, consetetur satipscingeirmod tempor invidunt ut Labore et dolore magna aliquyamerat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.adsadasd<li>Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.</li><li>Lorem ipsum dolor sat amet, nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyamerat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.</li><li>Lorem ipsum dolor sat amet, consetetur sadipscing elitd tempor invidunt ut laboure et dolore magna aliquyamerat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.</li><li>Lorem ipsum dolor sat aur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyamerat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.</li></ol></节><h2>标题</h2><p>Lorem ipsum dolor sat amet、consetetur sadipscing elitr、sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyamerat、sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.<p>Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laboure et dolore magna aliquyam erat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.<p>Lorem ipsum dolor sat amet、consetetur sadipscing elitr、sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyamerat、sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.<p>Lorem ipsum dolor sat amet、consetetur sadipscing elitr、sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyamerat、sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.</节></文章></main>
I have a html page, I want to print with the browser. In IE9 and Chrome, everything works as expected, but on Firefox, the page is cut off. See 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>
Has anybody an idea how to solve this issue?
I have already tried to set overflow visible to every element:
* {
overflow: visible;
}
but that didn't solve the problem.
I have tested the code in Firefox33, IE9 and Chrome38, but only Firefox failed to print the page.
解决方案
The issue is the display: inline-block; bit, there are many ways to resolve the issues with css, I'm not sure what the end result is supposed to look like though.
这篇关于Firefox Print HTML 页面截断内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！