5

我现在有很大的问题。它只在 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（使用萤火虫计算）

还应该指出，当内容足够短以适合页面时，内容部分 (#d) 不会有分页符并停留在第一页上。

在此处输入图像描述

这只发生在例如在 chrome 中，我可以看到 #d 的内容将在第二页上溢出。

所以这就是问题所在。如何防止#c 和#d div 之间出现换行符？

4

2 回答 2

5

您的意思是如何在打印时防止分页？

#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

于 2012-02-10T16:22:09.940 回答
1

我来到这里，遇到同样的问题。我找到了解决方案！

我的情况：

  • 我有一个 div 作为标题
  • 然后另一个 div 包含一个很长的 pre
  • 该 pre 跨越多个页面

示例：

<div>Heading</div>
<div>
    <pre>Very long pre.</pre>
</div>

问题：

  • My Heading Div 出现在第 1 页
  • pre从第2页开始-“标题”和内容之间存在巨大差距。

解决方案：

最后，我尝试制作我的预样式display: inline。多田！现在我的标题 div 和第 1 页上的 pre start 一起开始了！

也许您可以弄乱元素的显示以更好地控制它。希望这对可能再次在这里绊倒的人有所帮助！

于 2014-03-19T21:26:34.690 回答