html - 按钮内的内容被偏移

Question

我在按钮中的内容在 Firefox 中被偏移了。我已将填充和边距设置为 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，这是我使用的 hack，它针对所有浏览器修复了它

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

干杯!