CSS 不使用 CSS 网格布局后打印分页符

Question

我正在使用 gridbyexample.com 定义的新 CSS3 布局技术。它工作得很好，除非我尝试打印布局。 Chrome 和 Firefox 似乎忽略了我在 CSS 中定义的任何分页符和横向视图模式。我有一支代码笔用于我的项目，但它似乎改变了它在打印预览模式下的外观，因此它只适合查看 HTML 和 CSS 而不是打印的外观。 https://codepen.io/JeffreySpring/pen/rzjeKm

我已经创建了一个 .zip 文件，其中包含可以从 https://drive.google.com/open?id=0B0LdH-fKpAKeY0NRa290M25uTGc

下载的所有文件和图像

这里是 HTML

<!DOCTYPE html>
<html>
<head>
    <title>Steam Controller Bindings Template</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>


<body cz-shortcut-listen="true" style="">

<ul class="wrapper">

    <li class="device">
        <div id="steamDeviceContainer">
            <div><h1>Couch Gamer's Witcher 3 Bindings</h1></div>
            <img src="img/steam_controller.png" alt="Steam Controller">
        </div>
        <div class="mappingGyroShift1">
            <h3 class="mappingHeader gyroShift1">Gyro<span class="boundTo gyroShift1">(Mouse Joystick)</span></h3>
            <div class="actionBind gyroShift1">Precision Crossbow/Bomb Aim</div>
        </div>
    </li>
    <li>
        <div class="mapping">
            <h3 class="mappingHeader">Left Trigger</h3>
            <div class="actionBind">Use Witcher Senses</div>
            <div class="actionBind">Block or Counterattack</div>
        </div>
        <div class="mapping">
            <h3 class="mappingHeader">Left Bumper</h3>
            <div class="actionBind">Quick choice menu</div>
        </div>
        <div class="mapping">
            <h3 class="mappingHeader">Select Button</h3>
            <div class="actionBind">Pause Game/Game Options</div>
            <div class="actionBind">HOLD: Inventory Screen</div>
        </div>
        <div class="mapping">
            <h3 class="mappingHeader">Left Grip</h3>
            <div class="actionBind">Use Item</div>
            <div class="actionBind gyroShift1">HOLD: (GYRO ON) Aim Crossbow/Bomb</div>
        </div>
    </li>
    <li>
        <div class="mapping">
            <h3 class="mappingHeader">Right Trigger</h3>
            <div class="actionBind">Use Sign</div>
        </div>
        <div class="mapping">
            <h3 class="mappingHeader">Right Bumper</h3>
            <div class="actionBind">Quick Save</div>
        </div>
        <div class="mapping">
            <h3 class="mappingHeader">Start Button</h3>
            <div class="actionBind">In Game Menu</div>
            <div class="actionBind">HOLD: Map</div>
        </div>
        <div class="mapping">
            <h3 class="mappingHeader">Right Grip</h3>
            <div class="actionBind modeShift1">Mode Shift Left TouchPad</div>
            <div class="actionBind modeShift1">Mode Shift A Button</div>
        </div>
    </li>
    <li class="wide">
        <div class="mapping pageBreakAfter">
            <h3 class="mappingHeader">Left Joystick<span class="boundTo">(Joystick Move)</span></h3>
            <div class="actionBind">ROTATE: Move Character</div>
            <div class="actionBind">DOUBLE PRESS: Call your mount</div>
        </div>
    </li>
    <li class="wide">
        <div class="mapping pageBreakAfter">
            <h3 class="mappingHeader">Face Buttons<span class="boundTo">(Button Pad)</span></h3>
            <div class="actionBind aBtn">A BUTTON: Interact/Roll</div>
            <div class="actionBind aBtn">A BUTTON HOLD: Run/Quick Swim/Gallop/Accelerate Boat</div>
            <div class="actionBind aBtn">A BUTTON QUICK DOUBLE PRESS THEN HOLD: Full Gallop</div>
            <div class="actionBind bBtn">B BUTTON: Jump/Dodge/Let helm go</div>
            <div class="actionBind bBtn">B BUTTON HOLD: Resurfacing</div>
            <div class="actionBind yBtn">Y BUTTON: Strong attack</div>
            <div class="actionBind xBtn">X BUTTON: Fast Attack</div>
            <div class="actionBind xBtn">X BUTTON HOLD: Submerging/Stop the Boat</div>
            <div class="actionBind modeShift1">A BUTTON: Autoloot</div>
        </div>
    </li>
    <li class="wide">
        <div class="mapping">
            <h3 class="mappingHeader">Left TouchPad<span class="boundTo">(4 way D-Pad)</span></h3>
            <div class="actionBind">D-PAD UP: Consumable 1/3</div>
            <div class="actionBind">D-PAD UP HOLD: Switch to Consumable 1/3</div>
            <div class="actionBind">D-PAD DOWN: Consumable 2/4</div>
            <div class="actionBind">D-PAD UP HOLD: Switch to Consumable 2/4</div>
            <div class="actionBind">D-PAD LEFT: Drawing or hiding steel sword</div>
            <div class="actionBind">D-PAD LEFT: Drawing or hiding silver sword</div>
            <div class="actionBind modeShift1">MODE SHIFT RIGHT GRIP: Radial Menu 1</div>
        </div>
    </li>
    <li class="wide">
        <div class="mapping">
            <h3 class="mappingHeader">Right TouchPad<span class="boundTo">(4 way D-Pad)</span></h3>
            <div class="actionBind">D-PAD UP: Consumable 1/3</div>
            <div class="actionBind">D-PAD UP HOLD: Switch to Consumable 1/3</div>
            <div class="actionBind">D-PAD DOWN: Consumable 2/4</div>
            <div class="actionBind">D-PAD UP HOLD: Switch to Consumable 2/4</div>
            <div class="actionBind">D-PAD LEFT: Drawing or hiding steel sword</div>
            <div class="actionBind">D-PAD LEFT: Drawing or hiding silver sword</div>
        </div>
    </li>
    <li class="full">
        <div class="mappingModeShift1">
            <h3 class="mappingHeader modeShift1">Radial Menu 1<span
                    class="boundTo modeShift1">(6 button touch menu)</span></h3>
            <div class="actionBind modeShift1">BUTTON 1: Aard</div>
            <div class="actionBind modeShift1">BUTTON 2: Yrden</div>
            <div class="actionBind modeShift1">BUTTON 3: Igni</div>
            <div class="actionBind modeShift1">BUTTON 4: Quen</div>
            <div class="actionBind modeShift1">BUTTON 5: Axii</div>
            <div class="actionBind modeShift1">BUTTON 6: Swap Crossbow/Bomb</div>
        </div>
    </li>
    <li class="full">
        <div class="mapping">
            <h3 class="mappingHeader">Details</h3>
            <div class="notes">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur arcu ut sapien ullamcorper,
                    vel ornare tellus venenatis. Pellentesque non sapien magna. Suspendisse potenti. Duis et turpis
                    sapien.
                    Donec turpis odio, posuere dignissim ornare semper, commodo a nunc. Nunc lacinia felis id elementum
                    vehicula.
                    Curabitur vel risus luctus, ornare nulla ac, tincidunt tellus. Nam tortor lorem, aliquet ut
                    efficitur vel,
                </p>
                <p>
                    ullamcorper vel metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus.
                    Nam v
                    itae odio arcu. Phasellus fermentum nisi ipsum, a viverra urna placerat dignissim. Ut tempus finibus
                    mauris
                    faucibus consequat. Proin eu risus interdum, malesuada lectus id, egestas tortor. In imperdiet eget
                    augue et semper.
                    Sed risus justo, pulvinar id velit et, ullamcorper posuere ex. Nulla vel laoreet purus. Vivamus sed
                    venenatis erat,
                    in aliquam lectus. Mauris et lectus id eros feugiat viverra eu eu massa.
                </p>
                <p>
                    Nam egestas malesuada ligula quis cursus. Duis quis lorem in nunc maximus malesuada. Cras ante enim,
                    tincidunt ac
                    risus vel, elementum tincidunt erat. Ut auctor dolor a metus ornare auctor. Pellentesque at tellus
                    mi. Morbi e
                    fficitur metus vel enim ullamcorper, quis sagittis eros condimentum. Phasellus laoreet consectetur
                    lectus et dapibus.
                    Morbi tincidunt id mi nec ullamcorper. Integer dictum, justo vitae ullamcorper tristique, lorem nunc
                    rutrum augue, ut
                    pellentesque diam purus at ex. Proin sollicitudin iaculis eros.
                </p>

            </div>
        </div>
    </li>
    <li class="full noPrint">
        <div class="mapping">
            <h3 class="mappingHeader">Screenshots</h3>
            <div class="notes">
                <div>
                    <img src="img/customRadialMenu.png" alt="Custom Menu Screenshot">
                </div>
            </div>
        </div>
    </li>
    <li class="full noPrint">
        <div id="videoWrapper">
            <div class="video-container">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/4lcm4bdtkZs" frameborder="0"
                        allowfullscreen></iframe>
            </div>
        </div>
    </li>
</ul>


</body>
</html>

这里是CSS

/*noinspection CssUnknownTarget*/
@import url('https://fonts.googleapis.com/css?family=Oswald');

html {
    box-sizing: border-box;
    font-family: 'Oswald', sans-serif;
}

*, *:before, *:after {
    box-sizing: inherit;
    background-color: #00335B;
    color: #F9F3F4;
}

img {
    max-width: 100%;
}

.wrapper {
    list-style: none;
    margin: 0 auto 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: dense;
}

@media print {
    .noPrint {
        display: none !important;
    }

    @page {
        size: landscape;   /* auto is the initial value */
        /* this affects the margin in the printer settings */
        margin: 25px 25px 25px 25px;
    }

    div.pageBreakAfter {
        page-break-after: always;
        page-break-inside: avoid;
    }

    div.pageBreakBefore {
        page-break-before: always;
        page-break-inside: avoid;
    }
}

@media (min-width: 460px) {
    .wrapper {
        grid-template-columns: 1fr 1fr;
    }

    .device {
        grid-column: 1 / 3;
    }

    .full {
        grid-column: auto / span 2;
    }
}

@media (min-width: 660px) {
    .wrapper {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .device {
        grid-column: 2 / 4;
        grid-row: 1 / 3;
    }

    .wide {
        grid-column: auto / span 2;
    }

    .full {
        grid-column: auto / span 4;
    }
}

.wrapper li {
    margin: 10px;
    padding: 10px;
}

h1 {
    font-family: 'Oswald', sans-serif;
    color: #F9F3F4;
    text-shadow: 0 0 300px #000;
    font-size: 150%;
    text-align: center;
}

.mapping {
    border: solid #F9F3F4 3px;
    border-radius: 9px;
    font-family: 'Oswald', sans-serif;
    color: #F9F3F4;
    margin: 20px;
}

.mappingModeShift1 {
    border: solid #FF8C00 3px;
    border-radius: 9px;
    font-family: 'Oswald', sans-serif;
    color: #FF8C00;
    margin: 20px;
}

.mappingGyroShift1 {
    border: solid #00FFFF 3px;
    border-radius: 9px;
    font-family: 'Oswald', sans-serif;
    color: #00FFFF;
    margin: 20px;
}

.mappingHeader {
    padding-left: 3px;
    padding-right: 3px;
    font-family: 'Oswald', sans-serif;
    font-style: normal;
    position: relative;
    left: 30px;
    top: -10px;
    text-transform: uppercase;
    display: inline;
}

#steamDeviceContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#videoWrapper {
    margin-left: 15px;
    margin-right: 15px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.actionBind {
    margin-left: 30px;
    margin-right: 10px;
    padding-bottom: 10px;
}

.notes {
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 30px;
    padding-bottom: 10px;
}

.boundTo {
    font-size: xx-small;
    vertical-align: super;
    padding: 2px;
}

.modeShift1 {
    color: #FF8C00 !important;
}

.gyroShift1 {
    color: #00FFFF !important;
}

.yBtn {
    color: #F4D00F;
}

.xBtn {
    color: #0084C4;
}

.aBtn {
    color: #34A853;
}

.bBtn {
    color: #fc0602;
}

Answer 1

如您所见，页面在网格布局块内不起作用。我尝试了我能想到的一切，但就是行不通。

我的报告的解决方案是在网格布局块之外执行 page-break-before。

弄了个小把戏，不过是可以做到的。您只需要确保您的 page-break 在任何显示之外：grid class.

CSS 不使用 CSS 网格布局后打印分页符

CSS print page-break-after not working with CSS Grid layout

css

page-break

css-grid