html - CSS:按钮边缘在Chrome中完美排列，但在Firefox中并非如此

我遇到以下问题：我创建了一个搜索栏和一个搜索栏。实际上，它是FontAwesome搜索图标，周围带有一些填充空间。在基于Chromium的浏览器中，搜索按钮与搜索栏完美对齐，但在Firefox中却没有。如何解决？

#searchfield {
	width: 200px;
	height: 40px;
	padding-left: 10px;
	border-style: solid;
	border-color: rgb(192,0,0);
	font-size: 110%;
	color: black;
	border-radius: 2px;
	border-width: 2px;
	background-color: transparent;
	border-right-width: 0px;
	border-top-right-radius: 0%;
	border-bottom-right-radius: 0%;
}

#searchbutton {
	cursor: pointer;
	color: white;
	font-size: 110%;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: rgb(192,0,0);
	border-radius: 4px;
	border-top-left-radius: 0%;
	border-bottom-left-radius: 0%;
}

<input id="searchfield" type="search" placeholder="Search"/><a id="searchbutton" title="Search">S</a>

我不希望FontAwesome图标引起任何问题，因此我将其替换为“ S”。

最佳答案

添加到#searchbutton vertical-align: text-bottom;中，它们完美地对齐。
它在Firefox中对我有效。
要仅在此浏览器中设置此属性，可以将以下代码放在CSS中：

@-moz-document url-prefix(){
    #searchbutton {
        vertical-align: text-bottom;
    }
}

关于html - CSS:按钮边缘在Chrome中完美排列，但在Firefox中并非如此，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59511725/