保持div的内容在IE8打印 [英] Keep contents of a div together for printing in IE8
问题描述
给定以下HTML文档，当在IE8中打印时，我需要将表标题行保留在与< table> p>
尽管 page-break-inside：avoid; ，标题和表之间仍然有分页符。我的理解是，应该避免分页，并将整个 div 推到第2页。
doctype为XHTML 1.0 Transitional，我有< meta http-equiv =X-UA-Compatiblecontent =IE = 8/> 标准模式，据称支持此语法，我已验证通过检查 document.compatMode ==CSS1Compat，以标准模式进行渲染。 XHTML有效。
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd \">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =X-UA-Compatiblecontent =IE = 8/>
< title>页标题< / title>
< / head>
< body>
< h1>页面内容< / h1>
这是一些内容
< br />其中< br />应该< br />推&br />表< br /> br />上< br />到< br />到< br />到< br / >应该< br />在< br />可能的< br />上< br />请！
< div style =page-break-inside：avoid;>
< p>< strong>需要与表格保持的表格标题< / strong>< / p&
< table>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr&
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< / table>
< / div>
< / body>
< / html>
解决方案IE8支持此功能是错误的。
虽然Internet Explorer的Windows版本8支持的值避免它是一个有点儿车在地方。例如，如果应用于p元素，浏览器将尝试避免如预期那样破坏元素内的页面;但如果应用于ul元素，则整个列表不会设置为避免，因为列表可能跨越两个页面。
在这个例子中，我们可以总结它将尝试不打破页面内部的p，也不在表内，但它不会结合两者。您可以在
< p>中加入一个很长的文字来测试。
将您的标题加入表格中：
< table style =page-break-inside：avoid; border =1>
< tr>< th colspan =3>需要与表保持的表标题< / th>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
< tr>< td> one< / td>< td>两个< / td>< td> three< / td>< / tr>
[...]
Given the following HTML document, I need to keep the "Table title" line on the same page as the
<table>when being printed in IE8.Despite the
page-break-inside:avoid;, there is still a page break between the title and the table. My understanding of this suggests a page break should be avoided and the wholedivpushed on to page 2.The doctype is XHTML 1.0 Transitional, I have
<meta http-equiv="X-UA-Compatible" content="IE=8" />set to force IE8 into Standards Mode which supposedly supports this syntax, and I have verified the rendering is being done in standards mode by checkingdocument.compatMode == "CSS1Compat". The XHTML is valid.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <title>Page title</title> </head> <body> <h1>Page content</h1> this is some content <br />which<br />should<br />push<br />the<br />table<br />below<br />on<br />to<br />the<br />next<br />page<br />but<br />the<br />table<br />should<br />be<br />kept<br />together<br />if<br />at<br />all<br />possible<br />please! <div style="page-break-inside:avoid;"> <p><strong>Table title which needs to be kept with the table</strong></p> <table> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> </table> </div> </body> </html>
解决方案IE8 support for this feature is buggy.
Although Internet Explorer for Windows version 8 supports the value avoid it is a little buggy in places. For example, if applied to a p element, the browser will try to avoid breaking the page inside the element as expected; but if applied to a ul element, the whole list is not set to avoid as the list may span the two pages. That said, the individual list element will try to avoid having a page break inside.
From this example, we can conclude it will try to not break the page inside the p, nor inside the table, but it won't combine both. You can test it by having a really long text in your
<p>.A way to fix this would be to include your title in your table :
<table style="page-break-inside:avoid;" border="1"> <tr><th colspan="3">Table title which needs to be kept with the table</th></tr> <tr><td>one</td><td>two</td><td>three</td></tr> <tr><td>one</td><td>two</td><td>three</td></tr> [...]
这篇关于保持div的内容在IE8打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
