页码:(http://progrock.rocks/teaching_materials/loops.html)。
它是一个文件中的所有内容(CSS、JavaScript和HTML):

<!DOCTYPE html>
<!-- Copyright (c) 2016 Alf P. Steinbach. Boost 1.0 license. -->
<html>
    <head>
        <meta charset="utf-8">
        <title>Lapper for «loops» gruppeøvelse i praktisk regning</title>
        <!-- link rel="stylesheet" href="style.css" -->
        <style>
            * { font: 10pt sans-serif; }
            body { margin: 0; padding: 0; background-color: white; }
            h1
            {
                padding-left: 14px; padding-top: 0; padding-bottom: 0.5em; padding-right: 0;
                margin-top: 0; margin-bottom: 0;
                background-color: lightGray;
                font-size: xx-large; font-style: italic; color: #A0B0B0;
            }
            div#content
            {
                margin: 0;
                padding-left: 0; padding-right: 0;
                position: absolute; width: 100%;
            }
            div#input-area
            {
                left: 0; right: -0;
                padding-left: 14px; padding-right: 14px;
                padding-top: 0.5em; padding-bottom: 0.5em;
                margin-left: 0; margin-right: 0;
                background-color: #F0F0F0;
            }
            div#notes-container
            {
                left: 0; right: -0;
                padding-left: 14px; padding-right: 14px;
                padding-top: 0.5em; padding-bottom: 0.5em;
                margin-left: 0; margin-right: 0;
                /*display: none;*/
            }
            input.Number-input
            {
                width: 5em;
            }
            .Access-key
            {
                text-decoration: underline;
            }
            div.Note
            {
                margin-top: 0px; margin-right: 12px;
                margin-bottom: 8px; margin-left: 0px;

                padding-left: 2em; padding-right: 2em;
                padding-top: 1em; padding-bottom: 0.5em;

                background-color: #FFFFB0;
                width: 15em;
                overflow: hidden;

                border-radius: 1em;
                border: 1px gray solid;
                display: inline-block;
            }
            div.Note-figure
            {
                float: right; font-size: 4em; color: #D0E0E0;
                padding: 0px; margin: 0px; vertical-align: top;
                transform: rotate(-7deg);
                border-radius: 0.5em;
                background-color: white;
            }
        </style>
        <script>
            function item( id )
            {
                return document.getElementById( id );
            }

            function generate()
            {
                const n_notes = 11;
                const operand = parseInt( item( "fixed-operand" ).value );
                const operation = item( "operation" ).value;    // +, *
                const start_number = (operation == "+"? 0 : 1);

                console.log( "Generate" )
                var container = item( "notes-container" );
                var collection = item( "notes-collection" );
                if( collection !== null )
                {
                    collection.remove();
                    collection = null;
                }
                var message = document.createTextNode("Genererer…");
                container.appendChild( message );

                collection = document.createElement( "div" );
                collection.id = "notes-collection";

                var template = item( "note-template" )
                console.log( "template = " + template )
                var current = start_number;
                for( let i = 0; i < n_notes; ++i )
                {
                    let note = template.cloneNode( true );
                    note.style.display = "inline-block";
                    let note_has = note.querySelector( "#note-has" );
                    note_has.innerHTML = "Jeg har " + current.toString() + ".";
                    let note_seeking = note.querySelector( "#note-seeking" );
                    let display_op = (operation == "+"? " + " : "∙");
                    note_seeking.innerHTML = "Hvem har " + current + display_op + operand + "?";
                    if( i == n_notes - 1 ) { note_seeking.innerHTML = "Siste tall!"; }
                    let figure = note.querySelector( "#figure" );
                    switch( operation )
                    {
                        case "+": figure.innerHTML = i + "∙" + operand; break;
                        case "*": figure.innerHTML = operand + "↑" + i; break;
                    }

                    collection.appendChild( note );
                    switch( operation )
                    {
                        case "+": current += operand; break;
                        case "*": current *= operand; break;
                    }
                }
                message.remove();
                container.appendChild( collection );
            }

            function explanation_of( op )
            {
                switch( op )
                {
                    case "+":   return "dette gir en gangetabell";
                    case "-":   return "dette gir en baklengs gangetabell";
                    case "*":   return "dette gir en potenstabell";
                    case "/":   return "dette gir en baklengs potenstabell";
                }
            }

            function update_explanation()
            {
                item( "operation-explanation" ).innerHTML =
                    "(" + explanation_of( item( "operation" ).value ) + ").";
            }

            function on_command_generate()
            {
                generate();
            }

            function on_operation_changed()
            {
                update_explanation();
            }

            function on_document_loaded()
            {
                item( "title-header" ).innerHTML = document.title;
                item( "operation" ).value = "+";
                update_explanation();
                generate();
            }
        </script>
    </head>
    <body onload="on_document_loaded()">
        <h1 id="title-header">asdasd</h1>
        <div id="content">
            <div id="input-area">
                <select id="operation" onchange="on_operation_changed();">
                    <option value="+">+ (addisjon)</option>
                    <option value="*">* (multiplikasjon)</option>
                </select>
                med fast operand
                <input id="fixed-operand" type="number"
                    class="Number-input"
                    alt="Det faste tallet i utregningene"
                    value="2"
                    min="1"
                    max="10"
                    >
                <span id="operation-explanation"></span>
                <button onclick="on_command_generate();" accesskey="g">
                    <span class="Access-key">G</span>enerér
                </button>
            </div> <!-- input-area -->
            <div id="notes-container">
                <div id="note-template" class="Note" style="display:none">
                    <div id="figure" class="Note-figure">
                        5∙7
                    </div>
                    <div style="position: absolute">
                        <span id="note-has">Jeg har 35</span>
                        <br/>
                        &nbsp;<br/>
                        <span id="note-seeking">Hvem har 35 + 7?</span>
                    </div>
                </div>
                <div id="notes-collection">
                </div>  <!-- notes-collection -->
            <div> <!-- notes-container -->
        </div> <!-- content -->
    </body>
</html>

问题:100%打印预览效果良好,
javascript - CSS:在Firefox中按比例放大的打印预览中发生了变化-LMLPHP
当我放大打印预览时,分页符后面或周围的内容会在它周围移动,结果很难看,无法使用:
javascript - CSS:在Firefox中按比例放大的打印预览中发生了变化-LMLPHP
我在另一台机器上尝试了一个CSS属性,该属性应该可以防止div.Note-figure中的分页,但这不起作用。对不起,我这里没有。我也试过用google搜索Firefox打印预览的问题,但没有成功。

最佳答案

我不太确定是什么导致了Firefox中的打印预览问题,但我通过给每个黄色的注释定位,即position: relative;,并在注释div中给出文本position: absolute来解决了这个问题。
我还给了文本-divaz-index: 1,这样当空间太拥挤时,它可以浮在大的灰色文本上。
这种解决方案的主要问题是,在不了解问题原因的情况下,解决方案是非常随意的,因此不太具有可复制性。因此,如果有人能解释发生了什么,以及为什么这种方法有效,我将不胜感激。假设不是火狐的错误?

div.Note
{
    margin-top: 0px; margin-right: 12px;
    margin-bottom: 8px; margin-left: 0px;

    padding-left: 2em; padding-right: 2em;
    padding-top: 1em; padding-bottom: 0.5em;

    background-color: #FFFFB0;
    width: 15em;
    overflow: hidden;

    border-radius: 1em;
    border: 1px gray solid;
    display: inline-block;

    position: relative;
}
div.Note-text
{
    background-color: transparent;
    position: absolute; z-index: 1;
}
div.Note-figure
{
    float: right; font-size: 4em; color: #D0E0E0;
    padding: 0px; margin: 0px; vertical-align: top;
    transform: rotate(-7deg);
    border-radius: 0.5em;
    background-color: white;
}

08-15 14:32