字形图标在 Firefox 中未正确对齐答案

【问题标题】：Glyphicons not aligning properly in Firefox字形图标在 Firefox 中未正确对齐
【发布时间】：2016-10-02 18:36:03
【问题描述】：

我正在尝试制作一个显示应用程序的页面，应用程序所在的环境（Dev、Test、Prod 等），最后是应用程序运行的主机。

在我们的后端，我们对其进行了设置，以便应用程序可以设置为主动或被动，主机也可以设置为主动或被动。我添加了可视化应用程序和主机状态的字形图标。

glyphicons 应该包含在服务器名称按钮中，如果您在 Chrome 中运行 jsfiddle，您将看到它的外观。

问题出在 Firefox 中，字形图标被下推到看起来像新行的位置。我不希望这种情况发生 - 我希望它看起来与 Chrome 中的一样。我已经对属性进行了一些谷歌搜索和检查，但无法确定为什么会发生这种情况以及如何修复它。

<body>
<div id="container" class="container-fluid col-lg-10 col-md-10 col-sm-12" role="main">
  <div class="app row" id="ATStatsProcessor">
    <h4>Application Name</h4>
    <div class="environment col-sm-4 col-lg-3">
      <h5>Environment Name</h5>
      <span class="glyphicon glyphicon-chevron-down pull-right"></span>
      <span class="glyphicon glyphicon-chevron-up pull-right"></span>
      <div class="host">
        <div class="host btn btn-default btn-pressed">
          <span class="button-text">Server Name</span>
          <span class="state-enabled icon-size-small glyphicon glyphicon-off pull-right"></span>
          <span class="state-enabled icon-size-small glyphicon glyphicon-hdd pull-right"></span>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

CSS：

.app {
    color: #818a98;
    border-radius: 6px;
    margin: 1em;
    padding: 1em;
    background-color: #e4e9ef;
}

div.environment h5 {
    display: inline-block;
    max-width: 80%;
}

.environment {
    color: #818a98;
    border-radius: 6px;
    margin: .5em 2.25em;
    padding-top: .25em;
    padding-bottom: 1em;
    background-color: white;
}

.app .environment .host {
    display: inherit;
    margin: .25em;
}

.host.btn.btn-default {
    background-color: #c93135;
    color: white;
}

.host.btn.btn-pressed {
    background-color: #2f3b46;
    color: white;
}

.confirm.btn-success {
    background-color: #63a72c !important;
}

.confirm.btn-danger {
    background-color: #c93135 !important;
}

body {
    background-color: #f8f9fb !important;
}

.icon-size-small {
    font-size: x-small;
}

.state-enabled {
        color: green;
    }

    .button-text {
        display: inline-block;
        max-width: 85%;
        overflow-x: hidden;
    }

https://jsfiddle.net/zc419hwa/11/

【问题讨论】：

标签： html css twitter-bootstrap firefox

【解决方案1】：

浮动似乎清除了 Firefox 中具有 white-space: nowrap; 属性的父元素中的所有元素。不知道为什么会这样，但它可以很容易地解决。您可以通过几种不同的方式解决此问题：

通过将按钮文本跨度移动到字形图标之后来修改您的 HTML 代码，如下所示：

<div class="host btn btn-default btn-pressed">
    <span class="state-enabled icon-size-small glyphicon glyphicon-off pull-right"></span>
    <span class="state-enabled icon-size-small glyphicon glyphicon-hdd pull-right"></span>
    <span class="button-text">Server Name</span>
</div>

--或--

从您的 .btn 类中删除属性 white-space: nowrap;。

--或--

通过将此代码添加到您的 CSS 中来绝对定位您的字形图标：

.host {
  position: relative;
}

.host .glyphicon {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 5px;
  margin-right: 10px;
}
.host .glyphicon-hdd {
  margin-right: 21px;
}

【讨论】：

将服务器名称跨度移动到字形图标工作之后。你能解释一下为什么会这样吗？
在 Firefox 中浮动似乎是使用 white-space: nowrap; 属性清除元素。不知道为什么会这样。
实际上，在我自己的 JSFiddle 中玩过这个之后：jsfiddle.net/bdhmjbk1 我发现是父元素的 white-space: nowrap 属性导致了这个问题。浮动元素正在清除父元素为 white-space: nowrap 的任何元素。