Firefox打印内联块(内联块)一页错误

时间:2015-09-11 13:12:39

标签: html css firefox printing-web-page

显然Firefox在打印定义为内联块的长列时遇到问题,只要它打印长列,只要它适合一页然后裁剪它。

添加溢出:可见和许多其他技巧都无效。

看到这个小提琴http://jsfiddle.net/wsf9wvmp/1/(可能需要保存 - 因为jsfiddle没有正确打印html)。

<!DOCTYPE html>
<html>
<head>
    <style>
        #one {
            background-color: #00c0ef;
            height: 2000px;
        }

        #two {
            background-color: #a0cccf;
        }

        .column {
            display: inline-block;
            width: 100px;
            vertical-align: top;
            /*
            float: none !important;
            overflow: visible !important;
            position: relative;
            */
        }
    </style>
</head>
<body>

<div class="column" id="one">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis fringilla odio placerat pretium.
    Vestibulum tempus ut mi in tincidunt. Fusce fermentum sodales magna, dapibus maximus risus elementum ac. Phasellus
    bibendum condimentum dolor, id tristique risus accumsan non. Aliquam et quam efficitur, ultrices justo eu, facilisis
    sem. Vivamus mollis tortor nec metus bibendum volutpat. Phasellus molestie ultricies arcu, non accumsan leo dictum
    vitae. Fusce nec porta quam. Duis nisl tellus, sollicitudin nec varius ac, dignissim at augue. Etiam ut ante pretium
    odio molestie dictum. Pellentesque non velit varius, iaculis libero a, pellentesque ipsum. Donec vel dolor imperdiet
    massa efficitur euismod at ut mi.
    </p>
    <p>
        Sed eleifend tempus mauris, in sollicitudin felis gravida sit amet. Duis dictum neque erat, at ullamcorper elit
        dignissim et. Nulla eleifend erat nulla, in pretium magna ornare et. Sed a posuere ipsum, sed pellentesque eros.
        Aenean at purus semper, suscipit diam non, vehicula nulla. Cras eget ex nisi. Cras faucibus magna a cursus
        volutpat. Etiam bibendum urna ac justo ultrices pretium. Duis pulvinar enim sed turpis dignissim, eget fermentum
        ante dapibus. Donec nisl massa, congue vitae urna at, lobortis dignissim ante. Praesent pellentesque augue ac
        libero tincidunt, quis tempus eros sollicitudin. Sed scelerisque erat tincidunt mi lacinia semper. Nulla ac
        aliquam nunc. Nam ut sem vel orci pellentesque imperdiet ut eget elit.
    </p>

    <p>
        Morbi pretium urna felis. Sed et nulla libero. Integer fermentum pulvinar diam at egestas. Mauris sed tempus
        orci, id vestibulum turpis. Maecenas semper iaculis auctor. Sed in mi maximus, tincidunt est ut, molestie nulla.
        Integer eu quam purus. Praesent ullamcorper lacinia aliquam. Ut ornare est eget mi fermentum aliquet. Sed orci
        tellus, vestibulum eget facilisis ac, molestie ac ante. Nullam elementum, dui non congue tincidunt, neque diam
        volutpat lacus, eu euismod turpis mi at justo. Praesent at commodo nisl. Ut viverra odio eu justo pellentesque
        malesuada. In pellentesque nisl ut velit consequat, non malesuada elit gravida.
    </p>

    <p>
        Mauris eu velit porta, porttitor nulla non, dictum urna. Nam leo lorem, interdum et sapien id, imperdiet
        efficitur est. Aliquam in porta velit. Fusce ultricies, magna sed imperdiet egestas, lorem ante pharetra libero,
        et tempus lacus est sit amet enim. Maecenas ultricies urna sed condimentum convallis. Aliquam laoreet, quam nec
        sollicitudin sollicitudin, lectus ante condimentum enim, ullamcorper cursus sem nibh nec augue. Phasellus
        aliquam nisl laoreet neque efficitur ornare. Vivamus orci mauris, facilisis vitae faucibus sit amet, condimentum
        sit amet arcu. Morbi risus orci, porta non egestas eget, rutrum vel lorem. Curabitur hendrerit placerat risus,
        tincidunt porttitor tellus iaculis quis. Integer vel dapibus nisl.
    </p>

    <p>
        Vivamus non venenatis odio, varius rutrum urna. Maecenas blandit odio urna, in pretium mi dapibus et. Etiam
        sollicitudin lacus a nisl porta, in ullamcorper risus semper. Nulla egestas, felis eu imperdiet blandit, ante
        dolor tincidunt nisl, id pulvinar velit ex ut odio. Mauris ornare finibus dignissim. Vestibulum ut sollicitudin
        metus. Cras in finibus quam, ut tempor arcu. Aliquam id varius neque. Nulla rutrum convallis nulla, vitae
        accumsan felis. Maecenas tincidunt nunc a nibh suscipit, ac sodales risus hendrerit. In in consequat eros.
        Suspendisse eleifend, metus quis fermentum molestie, ipsum augue pharetra massa, vel faucibus dui ipsum nec
        enim. Fusce ultrices efficitur blandit. Donec urna ipsum, fringilla at mauris sit amet, elementum dictum elit.
        Fusce posuere dui nulla, ac rhoncus odio rhoncus at.
    </p>

    <p>
        Morbi pretium urna felis. Sed et nulla libero. Integer fermentum pulvinar diam at egestas. Mauris sed tempus
        orci, id vestibulum turpis. Maecenas semper iaculis auctor. Sed in mi maximus, tincidunt est ut, molestie nulla.
        Integer eu quam purus. Praesent ullamcorper lacinia aliquam. Ut ornare est eget mi fermentum aliquet. Sed orci
        tellus, vestibulum eget facilisis ac, molestie ac ante. Nullam elementum, dui non congue tincidunt, neque diam
        volutpat lacus, eu euismod turpis mi at justo. Praesent at commodo nisl. Ut viverra odio eu justo pellentesque
        malesuada. In pellentesque nisl ut velit consequat, non malesuada elit gravida.
    </p>

    <p>
        Mauris eu velit porta, porttitor nulla non, dictum urna. Nam leo lorem, interdum et sapien id, imperdiet
        efficitur est. Aliquam in porta velit. Fusce ultricies, magna sed imperdiet egestas, lorem ante pharetra libero,
        et tempus lacus est sit amet enim. Maecenas ultricies urna sed condimentum convallis. Aliquam laoreet, quam nec
        sollicitudin sollicitudin, lectus ante condimentum enim, ullamcorper cursus sem nibh nec augue. Phasellus
        aliquam nisl laoreet neque efficitur ornare. Vivamus orci mauris, facilisis vitae faucibus sit amet, condimentum
        sit amet arcu. Morbi risus orci, porta non egestas eget, rutrum vel lorem. Curabitur hendrerit placerat risus,
        tincidunt porttitor tellus iaculis quis. Integer vel dapibus nisl.
    </p>

    <p>
        Vivamus non venenatis odio, varius rutrum urna. Maecenas blandit odio urna, in pretium mi dapibus et. Etiam
        sollicitudin lacus a nisl porta, in ullamcorper risus semper. Nulla egestas, felis eu imperdiet blandit, ante
        dolor tincidunt nisl, id pulvinar velit ex ut odio. Mauris ornare finibus dignissim. Vestibulum ut sollicitudin
        metus. Cras in finibus quam, ut tempor arcu. Aliquam id varius neque. Nulla rutrum convallis nulla, vitae
        accumsan felis. Maecenas tincidunt nunc a nibh suscipit, ac sodales risus hendrerit. In in consequat eros.
        Suspendisse eleifend, metus quis fermentum molestie, ipsum augue pharetra massa, vel faucibus dui ipsum nec
        enim. Fusce ultrices efficitur blandit. Donec urna ipsum, fringilla at mauris sit amet, elementum dictum elit.
        Fusce posuere dui nulla, ac rhoncus odio rhoncus at.
    </p>
</div>

<div class="column" id="two">
    AAAAAAAAAAAAAAAAAAAAAAa
</div>


</body>
</html>

我首先将列定义为inline-block,因为Firefox裁剪了定义为float:left的列,所以我不得不发明一些不同的内容来打印整列。

显然,inline-block与Firefox存在同样的问题。

还有其他解决方案吗?

0 个答案:

没有答案