如果我有以下 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 都将它们全部打印在一页上，忽略分页符。这是那些浏览器中的错误吗？有一个更好的方法吗？
Thanks.
正是浮标扰乱了打印。
您需要那里的浮标进行打印吗？还是只有网络才需要浮动？
为什么我要问的是你可以为不同的媒体（打印、屏幕）使用不同的 CSS 类http://www.w3.org/TR/CSS2/media.html 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>
Update:
这能满足您的需要吗？打印时每页显示 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
