打印时是什么破坏了我的页面？答案

【问题标题】：What is breaking my page when printing?打印时是什么破坏了我的页面？
【发布时间】：2014-09-02 07:08:00
【问题描述】：

我有一个提问者，但我不知道为什么在打印它时会在第一个问题之前造成中断。

【问题讨论】：

打印您在问题中显示的内容以及前两个问题。可能是您的打印机设置的本地问题..？
我认为这是 Firefox 的问题。我现在尝试用 Chrome 打印它，没有任何问题。火狐可以解决吗？
当我尝试时，我也在 Chrome 中这样做了。
Printing fieldsets in firefox的可能重复

标签： html printing page-break page-break-inside

【解决方案1】：

我能够通过删除包含所有内容的 fieldset 容器来解决此问题。拥有 fieldset 元素会导致所有字段组合在一起，并且由于它们无法全部放在第一页上，他们都被推到了第二页。通过删除 fieldset 元素，我能够让 Firefox 以与 Chrome 相同的方式打印第 1 页上的前两个问题。

这似乎不是 Firefox 和 fieldset 一起玩不好的新问题，因为我发现了一张 2008 年的旧 Bugzilla 票证，该票证一直存在，并且在 2014 年仍在被评论(link)

如果保留字段集很重要，我在这里找到了其他人提出的解决方案(link)

<script type='text/javascript'>
    $(window).bind('beforeprint', function(){
        $('fieldset').each(
            function(item)
            {
                $(this).replaceWith($('<div class="fieldset">' + this.innerHTML + '</div>'));
            }
        )
    });
    $(window).bind('afterprint', function(){
        $('.fieldset').each(
            function(item)
            {
                $(this).replaceWith($('<fieldset>' + this.innerHTML + '</fieldset>'));
            }
        )
    });
</script>

【讨论】：

我添加了<style type="text/css" media="print"> .control-group {page-break-inside: avoid;} .btn {display:none;} .btn-primary {display:none;} #footer {display:none;} .descriere {page-break-after: avoid;} body {background-color: white;} </style>。现在在 Chrome 上正是我想要的，但在 Firefox 中只打印第一页（h4 + 描述）和一页问题。
内容不是静态的。如果调查的创建者在第一个问题上打出 10 个项目符号，情况就会改变。
删除字段集解决了我的问题。谢谢！