Печать наборов полей в Firefox - PullRequest
Новая
       33

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

12 голосов
/ 07 сентября 2011

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

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

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

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

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

Ответы [ 3 ]

7 голосов
/ 09 января 2013

Решение 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>
4 голосов
/ 07 сентября 2011

Как я уже догадался, в последних 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Если вы уволены, вы можете изменить fieldset s на div s или что-то в этом роде.

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

2 голосов
/ 15 марта 2012

Проверьте этот взлом 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>
...