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