IE11 Printing website loses lines at the bottom of every page

Question

I have a web application that displays a grid and a chart with legend. The application has the ability to print just the summary chart or the chart with the grid data. The grid data is then parsed into a nice printable format for html instead of the table it is in.

When attempting to print this I get flawless results in chrome of course. But IE11 cuts things off at the bottom of every page. It is almost like it is trying to cut off text. About 2-3 lines of text will be cut off for no apparent reason. The amount cutoff seems to depend on where it is within a div. For example if it cuts off in a title it would just be the one line. If it cuts off in the middle of the inner box then it will cut off everything to the end of that box and move to the next section on the next page.

IE11:

Chrome:

Things I have already tried:

1. Removed all floating for display inline-block
2. Made sure overlow was always visible
3. changing margins in print preview of IE11
4. Removed all styles entirely and there was still cutoff from text.

Any help would be greatly appreciated.

Answer 1

So it took me several days and slowly stripping out everything. It appears that I had one element somewhere up the chain not even in the html being presented that was position:absolute. I just added:

@media print{
    *{
        float:none!important;
        position:static!important;
    }
}

and everything worked.

Floats and position absolute apparently ruin print in IE. I recommend never using position absolute for page layout.