html – 防止2个div元素之间的分页符

概述我现在遇到了很多问题.它只是在Firefox(使用FF10测试)中烦恼,这个错误不会发生在Chrome 17或任何IE中. 这就是事情.我的页面架构看起来像这样 <div id="container"> <div id="a"> <img src="foo/bar.png" /> </div> <div id="b"> <div id="c" 我现在遇到了很多问题.它只是在firefox(使用FF10测试)中烦恼,这个错误不会发生在Chrome 17或任何IE中.

这就是事情.我的页面架构看起来像这样

<div ID="container">    <div ID="a">        <img src="foo/bar.png" />    </div>    <div ID="b">        <div ID="c">            <!--short content-->        </div>        <div ID="d">            <!--long content-->        </div>    </div></div>

编辑：一些人要求提供CSS的一部分.我的代码在这里被简化了很多,这里是匹配的CSS的简化版本.

#container {    margin: 0 auto;    position: relative;    wIDth: 1000px;}#a{    height: 156px;    margin: 0 auto;    position: relative;    text-align: center;    top: 2px;    wIDth: 918px;}#b {    background-color: #FFFFFF;    Font-size: 12px;    margin: 0 auto;    text-align: left;    wIDth: 958px;}#c{    background: url("images/top_content.gif") no-repeat scroll left top #FFFFFF;    height: 50px;    margin: 0 auto;    wIDth: 100%;}#d{    padding: 40px 0px;}

作为奖励,#d div的计算高度为874px(用fireBUG计算)

应该指出,当内容足够短以适应页面时,内容部分(#d)将不会有分页符并保留在第一页上.

这种情况只发生在例如Chrome中,我可以看到#d的内容会在第二页上出血.

所以这是问题所在.如何防止#c和#d div之间的换行？

解决方法 你的意思是如何在打印时防止分页？

#c{    page-break-after: avoID;}#d {    page-break-before: avoID;}

请注意,执行此 *** 作的“新”方法是使用通用的break-before和break-after,如下所示：

#c{    break-after: avoID-page;}#d {    break-before: avoID-page;}

但是在所有浏览器中都不支持此功能.见https://developer.mozilla.org/en-US/docs/Web/CSS/break-before和https://developer.mozilla.org/en-US/docs/Web/CSS/break-after

总结

以上是内存溢出为你收集整理的html – 防止2个div元素之间的分页符全部内容，希望文章能够帮你解决html – 防止2个div元素之间的分页符所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。