按钮内的内容偏移了

Question

按钮中包含的内容在Firefox中已偏移。我将padding和margin设置为0，但是没有任何效果。在Chrome中看起来还不错。有什么我可以解决的吗？

	body {
		margin: 0;
		padding: 0;
	}


	#Group_1 {
		position: absolute;
		width: 111.35px;
		height: 43.263px;
		left: 14px;
		top: 13px;
		overflow: visible;
		cursor: pointer;
	}
  
	#Rectangle_1 {
		fill: rgba(255,78,78,1);
		stroke: rgb(112, 112, 112);
		stroke-width: 1px;
		stroke-linejoin: miter;
		stroke-linecap: butt;
		stroke-miterlimit: 4;
		shape-rendering: auto;
	}
	.Rectangle_1 {
		position: absolute;
		overflow: visible;
		width: 111.35px;
		height: 43.263px;
		left: 0px;
		top: 0px;
	}
	#HELLO {
		position: absolute;
		left: 23.749px;
		top: 10.204px;
		overflow: visible;
		width: 65px;
		white-space: nowrap;
		text-align: left;
		font-family: Helvetica Neue;
		font-style: normal;
		font-weight: normal;
		font-size: 20px;
		color: rgba(255,255,255,1);
	}

<button id="Group_1" onclick="document.title = new Date().toLocaleString()">
	<svg class="Rectangle_1">
		<rect id="Rectangle_1" rx="0" ry="0" x="0" y="0" width="111.35" height="43.263">
		</rect>
	</svg>
	<div id="HELLO">
		<span>HELLO</span>
	</div>
</button>

在Firefox中，它显示：

如果我将其从button更改为div，看起来不错。

Answer 1

将此浏览器样式重置添加到您的css中，这是我使用的一种技巧，并且已针对所有浏览器对其进行了修复

button {
  margin: 0;
  padding: 0;
  border: none;
  line-height: normal;
}

干杯！