CSS打印 - 奇怪的工件仅出现在Chrome中

时间：2017-11-27 10:52:16

标签： javascript html css google-chrome

我目前正在开发一个JS / HTML应用程序，我需要打印一个HTML页面。页面的布局看起来像

    <div class="customerOffer">
        <div class="buttonHeader"><span class="backButton">Back</span><span class="printButton">Print</span></div>
        <div class="panel">
            <div class="panelTitle"><span class="text">Title</span></div>
            <div class="panelBox">
                <div class="column">
                    <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div>
                    <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div>
                    <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div>
                    <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div>
                    <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div>
                    <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div>
                </div>
                <div class="column right">
                    <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div>
                    <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div>
                    <div class="row"><span class="label b">Text</span><span class="inputValueF">£0.00</span></div>
                </div>
            </div>
        </div>
        <div class="panel">
            <div class="panelTitle"><span class="text">Title</span></div>
            <div class="panelBox">
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="separator"></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row important"><span class="label b">Text</span><span class="inputValueF b">£0.00</span></div>
            </div>
        </div>
        <div class="panel">
            <div class="panelTitle"><span class="text">Title</span></div>
            <div class="panelBox">
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="separator"></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row coloured"><span class="label">Text</span><span class="inputValueF">£0.00</span></div>
                <div class="row important"><span class="label b">Text</span><span class="inputValueF b">£0.00</span></div>
            </div>
        </div>
    </div>

正如您所看到的，该页面由许多＆＃34; Panels＆＃34;组成。它有一个标题栏和一些信息。为了防止网页破坏＆＃39;在打印时，在其中一个面板中，我将page-break-inside: avoid;添加到此页面的@media print标记中的这些面板中。这是此HTML页面的LESS 

@import url(https://fonts.googleapis.com/css?family=Roboto);

@accent: #5280B8;
@secondary: #1e518d;
@background-blue: #4e96e7;
@panel: #FFFFFF;
//@rowOdd: #EFF2F6;
@rowOdd: lighten(@accent, 38%);
@rowEven: #FFFFFF;
@input-background: #e4e4e4;
@button-grey: #c6c7c8;

.button-template{
    height: 30px;
    border: 2px solid #fff;
    border-radius: 5px;
    font-family: Roboto;
    padding: 1px 8px;
    cursor: pointer;
    background-color: @accent;
    color: #fff;
    line-height: 25px;

    &:hover{
        background-color: darken(@accent, 10%);
    }
    &:active{
        background-color: darken(@accent, 20%);
    }
    &:focus{
        outline: none;
    }
}

* {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.wrapper{
    position: absolute;
    left: 50%;
    width: 1024px;
    height: 768px;
    transform: translate(-50%, 0);
    overflow: hidden;
    background-image: url(http://media.ca-a.com/MEDIA/OEM/NISSAN/GB/BG/NissanBG.png);

    &:before{
        width: 100%;
        height: 100%;
        content: ' ';
        position: absolute;
        background-color: @background-blue;
        top: 0;
        left: 0;
        z-index: -1;
        opacity: 0.66;
    }

    .customerOffer{
        width: 100%;
        background-color: gray;
        position: absolute;
        left: 200%;
        top: 0px;
        z-index: 1;

        &:before{
            width: 100%;
            height: 100%;
            content: ' ';
            position: absolute;
            background-color: @background-blue;
            top: 0;
            left: 0;
            z-index: -1;
            opacity: 0.66;
        }

        .buttonHeader{
            margin-top: 10px;
            margin-bottom: 10px;
            position: relative;

            .backButton{
                .button-template;
                left: 20px;
                position: relative;
            }
            .printButton{
                .button-template;
                margin-right: 10px;
                left: calc(~"89% - 20px");
                position: relative;
            }
        }

        .panel{
            width: calc(~"100% - 40px");
            overflow: hidden;
            border-radius: 10px;
            position: relative;
            margin-left: 20px;
            margin-right: 20px;
            margin-bottom: 20px;

            .panelTitle{
                width: 100%;
                height: 38px;
                background-color: @accent;

                .text{
                    line-height: 38px;
                    font-size: 18px;
                    font-weight: 500;
                    color: #fff;
                    position: relative;
                    left: 30px;
                }
            }

            .panelBox{
                height: auto;
                width: 100%;
                text-align: justify;
                background-color: @panel;
                border-radius: 0px 0px 10px 10px;

                .column{
                    padding-right: 0px;
                    height: 100%;
                    padding-left: 0px;
                    width: 50%;
                    vertical-align: top;
                    display: inline-block;
                    margin-top: 5px;

                    &.right{
                        float: right;
                    }                  
                }

                .row{
                    margin-bottom: 8px;

                    &:last-child{
                        border-radius: 0px 0px 8px 8px;
                    }

                    &.coloured{
                        margin-bottom: 0px;
                        padding: 4px 0px 4px 0px;

                        &:nth-child(odd){
                            background-color: @rowOdd;
                        }
                        &:nth-child(even){
                            background-color: @rowEven;
                        }

                        .label{
                            width: auto;
                        }

                        .inputValueF{
                            float: right;
                            margin-right: 10px;

                            &.b{
                                font-weight: bold;
                            }
                        }
                    }

                    &.important{
                        margin-bottom: 0px;
                        padding: 4px 0px 4px 0px;
                        background-color: @secondary;

                        .label{
                            color: @panel;
                            width: auto;
                        }

                        .inputValueF{
                            color: @panel;
                            float: right;
                            margin-right: 10px;

                            &.b{
                                font-weight: bold;
                            }
                        }
                    }

                    .label{
                        vertical-align: top;
                        display: inline-block;
                        width: 100px;
                        margin-left: 20px;

                        &.b{
                            font-weight: bold;
                        }
                    }

                    .inputValueF{
                        display: inline-block;
                    }
                }

                .separator{
                    height: 2px;
                    background-color: #212121;
                    width: 98%;
                    margin-left: 1%;
                }                
            }
        }
    }
}

@media print{

    div{
        page-break-inside: avoid;
    }

    .wrapper{
        overflow: visible;
        width: 210mm;
        height: 100%;
        background-color: transparent;
        background-image: none;
        //-webkit-print-color-adjust: exact;

        &:before{
            display: none;
        }

        .customerOffer{
            background-color: transparent;
            background-image: none;
            position: initial;
            overflow: visible;

            &:before{
                display: none;
            }

            .buttonHeader{
                display: none;
            }

            .panelTitle{
                //box-shadow: inset 0 0 0 1000px @accent;
                border: 2px solid @accent
            }

            .panelBox{
                border: 2px solid @accent;

                .row{
                    &.coloured{

                        &:nth-child(odd){
                            box-shadow: inset 0 0 0 1000px @rowOdd;
                        }
                        &:nth-child(even){
                            box-shadow: inset 0 0 0 1000px @rowEven;
                        }
                    }

                    &.important{
                        box-shadow: inset 0 0 0 1000px @secondary;

                        .label{
                            color: @panel;
                        }

                        .inputValueF{
                            color: @panel;
                        }
                    }


                }
            }
        }
    }
}

当我在Firefox中打印此页面时，我得到了我期望的输出。 enter image description here

但是当我在Chrome中打印它时，您可以在第一页的最底部看到一个幻影panelTitle元素。我只能使用page-break-inside: avoid; CSS重现这一点，否则打印将在其中一个面板内部中断。 enter image description here

有没有人有任何想法如何删除这个幻像元素？

2 个答案:

答案 0 :(得分：0)

事实证明，使用带有margin指令的@page属性时会出现此问题。

在我的CSS底部我有

@page{
    size: auto;   /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 5mm 0mm 5mm 0mm;  
}

如果我将保证金减少到5mm 0mm 0mm 0mm，那么问题就会消失，但这显然会产生其他问题。幸运的是，我测试过的打印机似乎不会打印（默认情况下至少）距离页面边缘5mm，因此在物理打印文档时不会出现。

答案 1 :(得分：-1)

看起来默认的页边距是不同的，并且元素之间的间距在firefox和chrome print之间也不一致。

也许使用page-break来确保新表在新页面上开始，而不是在两个页面之间拆分。

相关问题
最新问题