Javascript mozilla firefox中有缺陷的对齐，而chrome中一切正常_Javascript_Html_Css_Google Chrome_Firefox

Javascript mozilla firefox中有缺陷的对齐，而chrome中一切正常

javascript html css google-chrome firefox

Javascript mozilla firefox中有缺陷的对齐，而chrome中一切正常,javascript,html,css,google-chrome,firefox,Javascript,Html,Css,Google Chrome,Firefox,我想要一个所有元素都向左对齐的表单。google chrome一切正常，但firefox的布局有缺陷，即一个输入元素（范围）有点正确。这是一只虫子还是我错过了什么铬火狐 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <script>

我想要一个所有元素都向左对齐的表单。google 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>


试验
函数更改evas（evasValue）{
canvas=document.getElementById（'smiley'）；
context=canvas.getContext（'2d'）；
//脸
context.beginPath（）；
弧（100,100,75,0,2*Math.PI）；
gradient=context.createRadialGradient（100,100,50,75,75,100）；
渐变。添加颜色停止（0，“黄色”）；
渐变。添加颜色停止（1，“橙色”）；
context.fillStyle=渐变；
context.fill（）；
//左眼
context.beginPath（）；
弧（100-25,75,7,0,2*Math.PI）；
context.fillStyle='black'；
context.fill（）；
//右眼
context.beginPath（）；
弧（100+25,75,7,0,2*Math.PI）；
context.fillStyle='black'；
context.fill（）；
//嘴
context.beginPath（）；
上下文。moveTo（60125）；
二次曲线（100162-evasValue*7.5140125）；
context.lineCap=“round”；
context.strokeStyle='black'；
context.lineWidth=4；
stroke（）；
}
changeEvas（0）；
施梅尔兹尼沃

设置

左边距：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>



看起来像是一些填充/边距问题。你最好把代码放在一把小提琴里，这样我们就可以查出来了。谢谢。