Html CSS换页后和浮动不好玩？_Html_Css_Internet Explorer_Firefox_Safari

Html CSS换页后和浮动不好玩？

html css internet-explorer firefox safari

Html CSS换页后和浮动不好玩？,html,css,internet-explorer,firefox,safari,Html,Css,Internet Explorer,Firefox,Safari,如果我有以下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" conten

如果我有以下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都在一个页面上打印，忽略了分页符。这是那些浏览器中的一个bug吗？有更好的方法吗

谢谢。

是彩车把它弄得乱七八糟以便打印

你需要那里的彩车来打印吗？或者说浮动仅仅是网络所需要的

为什么我要问的是，您可以为不同的媒体（打印、屏幕）提供不同的CSS类

因此，您的浮动可以在屏幕媒体上显示-这将只显示在网络上。虽然您希望分页符仅在打印媒体上显示

下面是一个使用媒体的示例：（注意，在引用CSS时，可以通过属性选择媒体）


试验
@媒体印刷品{
.myDiv{在以下情况下换页：始终；}
}
@媒体屏幕{
.myDiv{float:left；}
}
你好
那里
比尔博
巴金斯

更新：

这能满足你的需要吗？打印时每页显示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>


试验
打破
{
分页符后：右；
宽度：700px；
明确：两者皆有；
}
.myDiv{
浮动：左；
宽度：200px；
高度：100px；
背景颜色：蓝色；
保证金：5px；
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9
11
22
33
44
55
66
77
88
99

您使用的IE版本是什么？即使是IE8也有这样的问题：所以如果你使用的是比IE8旧的，那可能就是罪魁祸首。这是IE8，我没有使用“左”、“右”或“继承”，所以我认为这个警告不适用于这里？我知道你一直在使用，但是当IE8只支持一个实现时，IE7很可能会失败。我有完全相同的需求，也遇到了完全相同的问题。我发现这在Firefox 3.6中运行良好，但在当前的Firefox 7.0中不起作用。为了产生输出，我安装了Firefox3.6。我正在用Mozilla填写错误报告。我不明白为什么浮点数与分页符有任何关系。不幸的是，打印时需要浮点数-我希望每个div并排打印，然后在第9个之后中断（因为它们在页面上的网格为3x3）。我能做些什么来避免糟糕的浮动/分页符交互吗？我昨天花了一点时间试图找出如何在IE（7-9beta）中实现这一点。似乎只要浮动在该元素上，它就会这样做。我确实有点幸运，在花车周围和花车内部的其他元素上添加了分页符，但结果并不总是“出色”。更新了答案。这个可以在IE中使用。只需在你的3x3的周围加一个div，这个div有分页符。精彩而简单。谢谢你，先生。

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