Question

我想要一个所有元素都在左边对齐的表单。 google-chrome的一切都很好，但是使用firefox布局是有缺陷的，即一个输入元素（范围）有点正确。这是一个错误还是我错过了什么？

铬

Chrome

火狐

Firefox

<!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>

Answer 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>

在mozilla firefox中有缺陷的对齐，而铬的一切都很好

1 个答案: