'Problem with Chrome display:inline-block and Print

I have a little problem with display:inline-block on Chrome when I try to print the page.

Here is the code:

<html>
<head>  
    <style>
    @page {margin:0.5cm 0;size:portrait;}
    div {margin:0;padding:0;} 
    .page {margin:0 0 0 1cm;}
    .bloc {margin:2px 0;display:inline-block;width:6.3cm;height:8.8cm;background:red;}
    </style>
</head>

<body>
    <div class="page">  
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>    
    </div>      
</body>

I want to have 9 blocks per 'A4' page when I print the page with my browser (Ctrl+P).

If I print this page with Google Chrome, the result is good. I have 9 blocks on page 1 and the next 4 blocks on page 2. That's OK.

But if I remove one block from the code (12 blocks in total), I have 6 blocks on page 1 (rather than 9), and the next 6 blocks on the next page.

If I remove 3 others blocks (9 blocks in total), the 9 blocks is well displayed on the same page.

I don't understand why.

On Firefox, it works good regardless the number of blocks : I have always 9 blocks per page. But on Chrome, the result depends on number of blocks.

How can I solve this problem?

cssgoogle-chromeprintingdisplay


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions