Bootstrap表单组中的锚标记不适用于Firefox

Question

同一行中有一个输入标签，其中的div中有一个锚点。定位标记完全不响应其位置。但是，如果在输入字段下方或上方添加新行，则可以使用。

<div data-states-for="email" class="form-group ">
<input id="email" name="email" type="email" class="form-control" placeholder="E-Mail" value="someEmailAddress" required="" autocomplete="email" readonly="">
<span style="float: right; margin-right: 10px; margin-top: -25px; z-index: 2;">
    <a href="https://someLink.com" class="fas fa-pencil-alt" onclick="someEventhandler" data-error="account_selection_required">
    </a>
</span>

此问题仅在 Firefox 上发生。有人对导致它的原因有任何暗示吗？我正在使用 Bootstrap 4.0.0