CSS页面中断和浮动不能很好地播放？

如果我有下面的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> 
    </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>

我想打印在每一页上一个字，每一个接一个分页符。（这是简化代码 - 在我的实际网页，彩车是很重要的。）

火狐打印此罚款，但IE和Safari都全部打印出来一个页面上，忽略分页符。这是这些浏览器中的错误吗？有一个更好的方法吗？

谢谢。

来源

2010-10-07 Colen

您正在使用什么版本的IE？即使IE 8也有这个问题：http://www.w3schools.com/CSS/pr_print_pageba.asp所以如果你使用比IE8更早的可能是罪魁祸首的人。 – 2010-10-07 22:25:43

这是IE8，和我没有使用任何“左”，“右”或“继承”，所以我不认为警告适用于这里......？ – Colen 2010-10-07 22:26:39

我知道你总是在使用，但是当IE8只支持1种实现时，IE7可能会失败。 – 2010-10-07 22:28:56

它是被搞乱它打印的浮动。

你需要的花车有打印？或者只有网页需要浮动？

为什么我问的是，你可以有不同媒体（印刷，丝网） 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>

更新（注引用CSS时，你可以通过属性选择媒体）？打印输出时，在每页上都会显示3x3。但在屏幕上它是一个3x6。快速样品。

<!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>

来源

2010-10-07 22:34:25

不幸的是，需要打印的花车 - 我希望每个div来打印并排，然后在9日之后突破（因为他们在页面上的一个3x3格）。有什么我可以做的，以避免糟糕的浮动/分页符交互？ – Colen 2010-10-07 22:41:31

昨天我花了一点时间试图弄清楚如何在IE（7-9beta）中做到这一点。 IT看起来每当这个浮动点就在那个元素上，它就会这样做。我确实有一点运气把页面折断后放在浮游物和浮游物内部的其他元素上，但结果并不总是“恒星”。 – 2010-10-08 16:08:42

更新了答案。这一个将在IE中工作。只是用一个有分页符的div来包围你的3x3。 – 2010-10-08 17:20:48

CSS页面中断和浮动不能很好地播放？

回答

相关问题