0
У меня есть html-страница, которую я хочу распечатать с помощью браузера. В IE9 и Chrome все работает так, как ожидалось, но в Firefox страница отключена. См. HTML:Firefox Печать 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, но только Firefox не смог распечатать страницу.
Но как его решить? Конечный результат в Firefox должен выглядеть как в Chrome или IE. Это означает, что он должен печатать более 1 страницы и не вырезать текст. Я обновил вопрос на примере, как он выглядит в FF и как он должен выглядеть (напечатан с хром) – bernhardh
ну, вы можете удалить бит display: inline-block; бит для чего-то. – erikvold
Я знаю, что я встроенный блок является проблемой, но если я удалю его, результат не будет выглядеть так, как ожидалось. Я попытаюсь решить его с помощью display: table-cell. – bernhardh