12

ページ ヘッダーの既存のプロジェクト (media="print" を使用) に新しい css を追加しています。それはスムーズに進んでおり、(一度だけ!) IE は期待どおりの良い結果をもたらしていますが、Firefox はそうではありません...

問題は、多くのフィールドを含むフィールドセットがあり、Firefox が (最新バージョンであっても) フィールドセット内で改ページを許可することを完全に拒否することです。これは、1 ページに収まらないものはすべて失われることを意味します...

3 年間公開されている mozilla Web サイト ( https://bugzilla.mozilla.org/show_bug.cgi?id=471015 ) で認められているバグを見つけましたが、合理的な回避策が見つかりません...

フィールドセットなどを削除する前に何か提案はありますか?

ありがとう、デイブ

4

3 に答える 3

7

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>
于 2013-01-09T14:11:00.120 に答える
4

お察しのとおり、最新のNightlyではまだ壊れています。

IE Print Protector (別名、広く使用されているhtml5shiv )と同様のことを試みることができます。

http://www.iecss.com/print-protector/#how-it-works

印刷時に要素を正しく表示するために、IE Print Protector は印刷時に一時的に HTML5 要素をサポートされているフォールバック要素 (div や span など) に置き換えます。IE Print Protector は、既存のスタイルに基づいて、これらの要素用の特別なスタイルシートも作成します。これは、リンク、スタイル、@imports、および @media で、HTML5 要素を要素名で安全にスタイル設定できることを意味します。その直後、IE Print Protector は、元の HTML5 要素をページの元の場所に復元します。これらの要素への参照と、それらの要素のイベントはそのまま残ります。

Firefoxが をサポートするよう onbeforeprintになりました。

したがって、が起動されると、 s をs などにonbeforeprint変更できます。fieldsetdiv

これがどれほど実行可能かはわかりませんし、確かに複雑に聞こえます。

于 2011-09-07T15:57:51.973 に答える
2

この問題を解決するために書いたばかりのこのjQueryハックをチェックしてください。少し遅れても共有したいと思います。「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>
于 2012-03-15T14:37:38.893 に答える