CSS Mozilla Firefox 的内联按钮不显示

Question

我的搜索按钮在 Mozilla Firefox 中显得格格不入，我不确定为什么会这样。我正在使用 Bootstrap 4 和 Angular 2

这是 Chrome

上的样子

这是它在 Firefox 上的样子。搜索按钮似乎与搜索文本不一致

我的HTML代码

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

我的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;
}

Answer 1

只需从您的图标中删除 .float-right。这是不必要的，会导致问题。

CSS Mozilla Firefox 的内联按钮不显示

CSS Button does not display inline for Mozilla Firefox

html

css

bootstrap-4

angular