Firefox printing only 1st page

后端未结

关注

 15  2357

I\'m working on print friendly css for a website. It previews/prints perfectly in IE, but Firefox (version 3.6) only previews/prints the 1st page.

Is anyone aware of

相关标签:

15条回答

梦谈多话

2020-12-14 06:04
I just found out, that from an element with
```
display:inline-block; 
```
only the first page is printed and everthing else is hidden. setting this to
```
display:block;
```
was the solution in my case.
0 讨论(0)
发布评论:

提交评论
- 加载中...
走了就别回头了

2020-12-14 06:06

If you are unable to overcome Firefox's limitations on printing, you could convert the page to a PDF. If you're up for that option, Prince XML is a library I'd highly recommend. It has very good CSS support including print media.

0 讨论(0)
发布评论:

提交评论
- 加载中...
天涯浪人

2020-12-14 06:08
If you don't want to go through all of your code, this is the only thing I've found that works for me without messing up all of my other CSS:
```
@media print {
  body {
    overflow: visible !important;
  }
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
爱一瞬间的悲伤

2020-12-14 06:08
I had the same issue because the height of body is set to 100%, after I modified to height: auto in my print.css, it worked.
```
@media print {
  body {
    height: auto;
  }
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
慢半拍i

2020-12-14 06:08
After a lot of research and trial & error, I have found this article by A list apart. I was skeptical because it's so old but it states that:

If a floated element runs past the bottom of a printed page, the rest of the float will effectively disappear, as it won’t be printed on the next page.

As I have a big floated container I thought I'd give it a try. So, I made a mix from other answers and this article and came up with this:
```
body { 
    overflow: visible !important; 
    overflow-x: visible !important; 
    overflow-y: visible !important; 
}

/*this is because I use angular and have this particular layout*/
body > .fade-ng-cloak { 
    height: 100%; 
    display: block;
    flex: none;
    float: none;
}
.l-content,
.l-sidebar {
    float: none;
}
```
So basically:
1. Setting body to overflow: visible
2. Setting elements that behave as wrappers to display: block, eliminate all flex styles and reset height if necessary
3. Eliminate float on long containers
That mix worked for me! I'm so happy I thought I'd share :)
0 讨论(0)
发布评论:

提交评论
- 加载中...

情书的邮戳

2020-12-14 06:10

What worked for me is add a non-zero top margin to the absolute element container as David Earl writes here https://bugzilla.mozilla.org/show_bug.cgi?id=267029

Like this

<html>
  <head>
    <style>
@page {
    size: A4 portrait;
    margin: 0;
}
body {
    margin: 0;
    padding: 0;
    font-family: "Verdana", sans-serif;
}
.page {
    position: relative;
    width: 209mm;
    height: 295mm; /* slightly smaller than A4 as there's a bug in Chrome whereby it overflows
                      the physical page otherwise  */
    overflow: hidden;
}
.pagea { background-color: tomato; }
.pageb { background-color: green; }
.content {
  position: absolute;
  top: 100px;
  left: 100px;
  font-size: 36pt;
  color: black;
}
@media print {
    .page {
        page-break-before: always;
        /* uncomment these lines and it works... 
        margin-top: 1px;
        top: -1px;
        */
          /* nudge back up to compensate for margin */
    }
    .page:first-child {
        page-break-before: avoid;
    }
}
    </style>
  </head>
  <body>
    <div class="page pagea">
        <div class="content">Page 1</div>
    </div>
    <div class="page pageb">
        <div class="content">Page 2</div>
    </div>
  </body>
</html>

0 讨论(0)

1 2 3 下一页