CSS 按钮在 Mozilla Firefox 中无法内嵌显示

Question

我的搜索按钮在 Mozilla Firefox 中显得不合适，我不知道为什么会这样。 我正在使用 Bootstrap 4 和 Angular 2

这是在 Chrome 上的样子

这是它在 Firefox 上的样子。搜索按钮似乎没有与搜索文本内嵌

我的 CSS 代码

.custom-search-button {
    color: #A09474;
    font-size: 16px;
    padding: 8px 16px;
    border: solid #A09474 1px;
    cursor: pointer;
    background-color: transparent;
}

.custom-search-button i {
    padding-left: 10px;
}

<button class="btn custom-search-button d-inline" [disabled]="!searchForm.valid">
  Search
  <i class="fa fa-search float-right" aria-hidden="true"></i>
</button>

Answer 1

只需从图标中删除

.float-right

即可。这是不必要的并且会导致问题。