如果我有以下
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <Meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>Test</title> </head> <body> <div style="page-break-after: always; float: left;">hello</div> <div style="page-break-after: always; float: left;">there</div> <div style="page-break-after: always; float: left;">bilbo</div> <div style="page-break-after: always; float: left;">baggins</div> </body> </html>
我想在每个页面上打印一个单词,每个单词后面都有一个分页符. (这是简化的代码 – 在我的实际网页中,浮动很重要.)
Firefox打印得很好,但是IE和Safari都在一个页面上打印它们,忽略了分页符.这是这些浏览器中的错误吗?有一个更好的方法吗?
谢谢.
解决方法
浮动物正在弄乱印刷.
你需要那里的花车进行印刷吗?或只是网络需要浮动?
为什么我要问的是你可以为不同的媒体(打印,屏幕)提供不同的CSS类
http://www.w3.org/TR/CSS2/media.html
所以你的浮动可以在屏幕媒体上 – 这只会显示在网络上.虽然您希望仅在打印介质上显示分页符.
以下是使用媒体的示例:(注意引用CSS时,您可以通过属性选择媒体)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <Meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>Test</title> <style> @media print { .myDiv { page-break-after: always; } } @media screen { .myDiv {float:left;} } </style> </head> <body> <div class="myDiv">hello</div> <div class="myDiv">there</div> <div class="myDiv">bilbo</div> <div class="myDiv">baggins</div> </body> </html>
更新:
这可以满足您的需求吗?打印出来时,每页打印3×3.但在屏幕上它是3×6.快速样品.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <Meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>Test</title> <style> .break { page-break-after: right; width:700px; clear:both; } .myDiv { float:left; width:200px; height:100px; background-color:blue; margin:5px; } } </style> </head> <body> <div class="break"> <div class="myDiv">1</div> <div class="myDiv">2</div> <div class="myDiv">3</div> <div class="myDiv">4</div> <div class="myDiv">5</div> <div class="myDiv">6</div> <div class="myDiv">7</div> <div class="myDiv">8</div> <div class="myDiv">9</div> </div> <div class="break"> <div class="myDiv">11</div> <div class="myDiv">22</div> <div class="myDiv">33</div> <div class="myDiv">44</div> <div class="myDiv">55</div> <div class="myDiv">66</div> <div class="myDiv">77</div> <div class="myDiv">88</div> <div class="myDiv">99</div> </div> </body> </html>