Печать наборов полей в firefox

Я добавляю новый css в существующий проект (используя media="print") в заголовке страницы. Все идет гладко, и (в кои-то веки!) IE дает хорошие ожидаемые результаты, но Firefox не...

Проблема в том, что у меня есть набор полей, который содержит много полей, а Firefox полностью отказывается (даже в последней версии) разрешать разрыв страницы внутри набора полей. Это означает, что все, что не помещается на одной странице, теряется...

Я обнаружил ошибку, подтвержденную на веб-сайте Mozilla, который был открыт в течение 3 лет — https://bugzilla.mozilla.org/show_bug.cgi?id=471015 - но не могу найти никакого разумного решения...

Любые предложения, прежде чем я постараюсь удалить наборы полей или что-то подобное?

Спасибо, Дэйв


css firefox fieldset truncate print-css
person Dave    schedule 07.09.2011    source источник
comment
возможный дубликат Обходной путь для набора полей печати FF усечен до одна страница (ошибка 471015)   -  person outis    schedule 22.05.2012
comment
Да, это дубликат, но эти решения лучше. Ошибке уже 9 лет, а она до сих пор не решена.   -  person Pino    schedule 16.06.2017

Ответы (3)


arrow_upward
4
arrow_downward

Как я и предполагал, в последней версии Nightly он все еще не работает.

Вы можете попробовать сделать что-то похожее на IE Print Protector (он же широко используется html5shiv).

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

Для правильного отображения элементов при печати IE Print Protector временно заменяет элементы HTML5 поддерживаемыми резервными элементами (такими как div и span) при печати. IE Print Protector также создает специальную таблицу стилей для этих элементов на основе существующих стилей; это означает, что вы можете безопасно стилизовать элементы HTML5 по имени элемента в ссылках, стилях, @imports и @media. Сразу после этого IE Print Protector восстанавливает исходный элемент HTML5 на странице именно там, где вы его оставили. Любые ссылки на эти элементы и любые события в этих элементах останутся нетронутыми.

Firefox теперь поддерживает onbeforeprint.

Итак, когда onbeforeprint запускается, вы можете заменить fieldsets на divs или что-то в этом роде.

Я не уверен, насколько это жизнеспособно, и, конечно, звучит сложно.

person thirtydot    schedule 07.09.2011
comment
Эй, спасибо за вклад - я думаю, я собираюсь изменить набор полей, вместо этого заставив его быть DIV ... Я все равно хотел избавиться от них :( - person Dave; 08.09.2011
comment
Я бы, наверное, поступил так же, если честно. Кого на самом деле волнует, fieldset это или div? - person thirtydot; 08.09.2011
comment
Да, это мое ощущение - я переделал все это, чтобы использовать набор полей только тогда, когда это правильно, и сгруппировал все остальное, используя div и h2 с некоторым умным CSS, чтобы сделать его идентичным! Спасибо за отзыв. Я отмечу это как принятое. - person Dave; 09.09.2011
comment
Надеюсь, кто-нибудь испечет этому жуку торт на его 10-летие. - person ben.tiberius.avery; 26.06.2017
comment
@ben.tiberius.avery 2018, и это показывает Сообщено: 10 лет назад... ну... с днем ​​рождения!!! - person Matías Cánepa; 27.04.2018

arrow_upward
7
arrow_downward

Мое решение JQuery для FF:

<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>
person Luke Duda    schedule 09.01.2013
comment
Очень хорошо, он срабатывает, даже когда я открываю предварительный просмотр печати, НО он теряет все атрибуты исходного тега набора полей: у меня есть набор полей disabled, который становится включенным после печати. - person Pino; 16.06.2017

arrow_upward
2
arrow_downward

Взгляните на этот хак 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>
person TheFrack    schedule 15.03.2012
comment
Спасибо за ответ. Я попробую :) - person Dave; 15.03.2012