Mozilla Firefox 的 CSS 按钮不显示内联答案

【问题标题】：CSS Button does not display inline for Mozilla FirefoxMozilla Firefox 的 CSS 按钮不显示内联
【发布时间】：2017-08-02 23:37:30
【问题描述】：

我的搜索按钮在 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;
}

【问题讨论】：

尝试将 box-sizing:border-box 添加到 .custom-search-button 类
对我来说看起来不错。这在 Firefox 中看起来不错吗？ codepen.io/anon/pen/mWwdwK
谢谢迈克尔。它看起来不错！因此，我的代码中的其他地方可能会弄乱样式。干杯。
尝试使用 CSS 将<i> 向左浮动。 i {float:left;} 如果这不起作用，请给它一个宽度并向左浮动。
@user172902 是的，我的代码笔中没有包含引导程序，只是帖子中的 html 和 css。我的错，我在阅读您在帖子中使用它后忘记包含它。

标签： html css angular bootstrap-4

【解决方案1】：

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

【讨论】：

这解决了我的问题！！！干杯。 @MichaelCoker 的 codepen 为何同时适用于 firefox 和 chrome？他没有删除右浮动