css 在Firefox中打印字段集

omvjsjqw  于 2023-06-25  发布在  其他
关注(0)|答案(4)|浏览(126)

我已经在页面标题中添加了一些新的css到一个现有的项目中(使用media=“print”)。一切都很顺利(就这一次!))IE给出了不错的,预期的结果,但Firefox没有。
问题是,我有一个包含很多字段的字段集,Firefox完全拒绝(即使在最新版本中)允许在字段集中使用分页符。这意味着任何不适合在一个页面上的内容都将丢失。
我在mozilla网站上发现了这个已经开放了3年的bug-https://bugzilla.mozilla.org/show_bug.cgi?id=471015-但是找不到任何合理的解决方法...
在我删除字段集或类似内容之前,有什么建议吗?
谢谢,戴夫

uujelgoq

uujelgoq1#

我的FF JQuery解决方案:

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

klsxnrf12#

正如我猜测的那样,它在最新的Nightly中仍然是坏的。
你可以尝试做一些类似于IE Print Protector(也就是广泛使用的html5shiv)的事情。
http://www.iecss.com/print-protector/#how-it-works
为了在打印时正确显示元素,IE Print Protector会在打印时暂时用支持的回退元素(如div和span)替换HTML5元素。IE Print Protector还会根据您现有的样式为这些元素创建一个特殊的样式表;这意味着你可以安全地通过链接、样式、@imports和@media中的元素名称来设置HTML5元素的样式。紧接着,IE Print Protector将原始HTML5元素恢复到页面,就在您离开它的地方。对这些元素的任何引用以及这些元素上的任何事件都将保持不变。
Firefox now supportsonbeforeprint
因此,当onbeforeprint被激发时,你可以将fieldset s更改为div s,或者其他东西。
我不确定这是否可行,而且听起来很复杂。

brvekthn

brvekthn3#

看看我刚刚写的这个jQuery hack来解决这个问题,我想我会分享,即使我有点晚了。你可以将“printEnclosure”改为HTML标签,我相信最后的CSS显然是可选的。

<div id="printEnclosure">
<fieldset>
<legend>TEST</legend>

Test Content goes here...
</fieldset>
</div>

<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function()
{
        var i = 0;
        $('#printEnclosure').find('fieldset').each(function()
        {
            i++;
            $(this).replaceWith('<div id="convertedfieldset'+i+'">'+$(this).html()+'</div>');
            $('div#convertedfieldset'+i).css('display','inline').css('text-align','left');
        });
});
/* ]]> */
</script>
de90aj5v

de90aj5v4#

由于jQuery现在并不常见,这里有一个完整的JavaScript解决方案:

window.onbeforeprint = event => {
    document.querySelectorAll('fieldset').forEach(item => {
        item.insertAdjacentHTML("beforebegin", `<div class="fieldset">${item.innerHTML}</div>`);
        item.parentElement.removeChild(item);
    })
};

window.onafterprint = event => {
    document.querySelectorAll('.fieldset').forEach(item => {
        item.insertAdjacentHTML("beforebegin", "<fieldset>" + item.innerHTML + "</fieldset>");
        item.parentElement.removeChild(item);
    })
};

相关问题