Выход в печать на FF с абсолютным позиционированием - PullRequest
Новая
       22

Выход в печать на FF с абсолютным позиционированием

6 голосов
/ 06 декабря 2011

У меня возникла проблема при печати формы, созданной с использованием абсолютного позиционирования в FF. Я печатаю на листе А4. Страница работает нормально, если ее форма с одной страницей, но когда мне нужно распечатать многостраничную форму, печатается только первая страница, а другие элементы, которые должны появиться на второй странице, перезаписывают друг друга одной строкой на следующей странице. Это довольно странно, то же самое работает нормально на IE

ПРИМЕЧАНИЕ Я не могу поделиться html, так как он содержит много CSS и довольно сложных и больших HTML-страниц. 

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
@-moz-document url-prefix() {div{position:relative} }
@media print { marquee { -moz-binding: none; } body{overflow:visible !important;} }
#a{
position:absolute;
top:50px;
left:70px;
}
#b{
position:absolute;
top:1050px;
left:170px;
}
#d{
position:absolute;
top:1650px;
left:270px;
}
#c{
position:absolute;
top:1550px;
left:470px;
}

</style>
</head>
<body>asdasd
<div id="a">aa</div>
<div id="d">bb</div>
<div id="b">ff</div>
<div id="c">asd</div>
asdasda
</body>
</html>

Ответы [ 5 ]

1 голос
/ 20 декабря 2011

Существует давняя проблема с Firefox и печатью элементов с абсолютным позиционированием, как упомянуто Даниэлем Б.

Можете ли вы переделать HTML + CSS, чтобы использовать относительное позиционирование?

В CSS добавьте некоторые элементы разрыва страницы (http://davidwalsh.name/css-page-breaks).. Это должно упростить стилизацию элементов блока, чтобы они перетекли в каждую «страницу» и правильно выровняли вещи при печати @media.

1 голос
/ 06 декабря 2011

Есть ветка, где тема уже обсуждалась: Печать Firefox только 1-я страница

Однако проблема может быть в CSS. Как объяснено здесь http://briancaos.wordpress.com/2008/12/05/firefox-only-prints-first-page-of-contents/

Если у вас есть 

overflow: hidden;

в вашем CSS, измените его на 

overflow:visible;

и тогда оно должно работать.

0 голосов
/ 28 декабря 2016 

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

#a{
position:relative;
height:50px;
left:70px;
border:solid 10px blue; 
}
#b{
position:relative;
top:20px;
height:2000px;
left:70px;
border:solid 10px red; 
}
#c{
position:relative;
top:50px;
height:250px;
left:70px;
border:solid 10px purple; 
}
#d{
position:relative;
top:100px;
height:3000px;
left:70px;
border:solid 10px green; 
}

</style>
</head>
<body>asdasd
<div id="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="b">bbbbbbbbbb</div>
<div id="c">cccccccccccccc</div>
<div id="d">ddddddddddddd</div>
asdasda
</body>
</html>
0 голосов
/ 20 декабря 2011

Если это возможно, установите высоту элементов div. Это по крайней мере заставит видимость на две страницы. Тем не менее, он не работает с перекрывающимися div s, и все еще может возникнуть проблема видимости содержимого div.

Вот мой пересмотр (были добавлены некоторые границы видимости и раскраска, и width может оказаться или не оказаться полезным): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    @-moz-document url-prefix() {
        div{
            position:relative;
            background-color: #dddddd;
            border: 1px solid #999999;
            width: 20%;
        } 
    }

    @media print { 
        marquee { 
            -moz-binding: none; 
        } 
        body{
            overflow:visible !important;
        }
    }
    #a{
        position:absolute;
        top:50px;
        left:70px;
        height: 1000px;
    }
    #b{
        position:absolute;
        top:1050px;
        left:170px;
        height: 600px;
    }
    #c{
        position:absolute;
        top:1550px;
        left:470px;
        height: 500px;
    }
    #d{
        position:absolute;
        top:1650px;
        left:270px;
        height: 100px;
    }

</style>
</head>
<body>asdasd
<div id="a">aa</div>
<div id="d">bb</div>
<div id="b">ff</div>
<div id="c">asd</div>
asdasda
</body>
</html>
0 голосов
/ 13 декабря 2011

изменить положение: абсолютное положение: относительное вы можете настроить таргетинг на firefox только в своей таблице стилей печати, используя: @ -moz-document url-prefix () {div {position :lative}}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...