0

すべての要素が左に配置されたフォームが必要です。google-chrome ではすべて問題ありませんが、firefox ではレイアウトに欠陥があります。つまり、1 つの入力要素 (範囲) が少し正しいだけです。これはバグですか、それとも何か見逃しましたか?

フィドル

クロム

クロム

ファイアフォックス

ファイアフォックス

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <script>
            function changeEvas(evasValue) {
                canvas = document.getElementById('smiley');
                context = canvas.getContext('2d');

                // face
                context.beginPath();
                context.arc(100, 100, 75, 0, 2 * Math.PI);
                gradient = context.createRadialGradient(100, 100, 50, 75, 75, 100);
                gradient.addColorStop(0, "yellow");
                gradient.addColorStop(1, "orange");
                context.fillStyle = gradient;
                context.fill();

                // left eye
                context.beginPath();
                context.arc(100 - 25, 75, 7, 0, 2 * Math.PI);
                context.fillStyle = 'black';
                context.fill();

                // right eye
                context.beginPath();
                context.arc(100 + 25, 75, 7, 0, 2 * Math.PI);
                context.fillStyle = 'black';
                context.fill();

                // mouth
                context.beginPath();
                context.moveTo(60, 125);
                context.quadraticCurveTo(100, 162 - evasValue * 7.5, 140, 125);
                context.lineCap = "round";
                context.strokeStyle = 'black';
                context.lineWidth = 4;
                context.stroke();
            }
        </script>
    </head>
    <body>
        <article>
            <canvas id="smiley" width="200" height="200"></canvas>
            <script>changeEvas(0);</script>

            <form action="#" method="post" style="width: 200px;">
                <label for="evas">Schmerzniveau</label>
                <input name="evas" id="evas" type="range" 
                       min="0" max="10" step="0.1" value="0"  
                       style="width: 200px;"
                       onchange="changeEvas(this.value)"
                       onkeypress="changeEvas(this.value)"
                       onmousemove="changeEvas(this.value)"><br>
                <img src="wedge.png" alt=""><br>
                <input id="submit" name="submit" type="submit" value="Ok" style="width: 200px;">
            </form>
        </article>    
    </body>
</html>
4

1 に答える 1

1

margin-left: 0;あなたの入力によって設定されます：

 <input name="evas" id="evas" type="range" 
    min="0" max="10" step="0.1" value="0"  
    style="width: 200px; margin-left: 0;"
    onchange="changeEvas(this.value)"
    onkeypress="changeEvas(this.value)"
    onmousemove="changeEvas(this.value)"><br>
于 2013-10-31T10:25:42.347 に答える