Question

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

在我们的后端，我们设置它以便应用程序可以被激活或被动，并且主机也可以被激活或被动。我添加了可视化应用程序和主机状态的glyphicons。

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/

Answer 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>

- 或 -

从white-space: nowrap;课程中删除媒体资源.btn。

- 或 -

通过将此代码添加到CSS中来绝对定位您的glyphicons：

.host {
  position: relative;
}

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

Glyphicons在Firefox中无法正确对齐

1 个答案: