对于Mozilla Firefox

Question

我的搜索按钮对于Mozilla Firefox来说不合适，我不确定为什么会这样做。 我正在使用带有Angular 2的Bootstrap 4

以下是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即可。这是不必要的，并导致问题。