使用FontAwesome

时间：2015-12-23 11:21:21

标签： html css flexbox font-awesome

我正在面对我的页面布局的非常奇怪的flexbox行为。我使用FontAwesome来呈现某些符号。

基本上，我在另一个弹性箱项目中有2个弹性箱项目，这些子项目比父项目更宽。

1）我有一个.content__header对象，它在另一系列flexbox对象中呈现为flexbox对象。

2）.content__header对象包含2个子对象：.breadcrumb和.page_tools。这些子对象也会呈现为弹性项目。

3）在.breadcrumb对象中，我有一些span个对象（.breadcrumb__test），其内容被FontAwesome图标取代。替换是使用::after伪元素的绝对定位完成的。

4）当我删除所有.breadcrumb__text HTML元素或从样式表中删除.breadcrumb__text::after定义时 - 定义FontAwesome字体的使用 - 子对象（{{1} }和.breadcrumb）以正确的宽度渲染。所以我猜它与FontAwesome图标的替换有关。

.page_tools

问题的视觉表示

绿线表示父宽度与其实际内容之间的差异。

Visual representation of the issue

代码＆amp;小提琴下面。

浏览器：谷歌浏览器47.0.2526.106米

小提琴：

https://jsfiddle.net/44gymmw2/6/

更新

当我从.breadcrumb__text::after { font-family: "FontAwesome"; font-weight: 400; } CSS定义中删除text-indent: 100%;时，.breadcrumb__text按预期呈现。但是，当我离开.breadcrumb并删除样式表顶部的text-indent定义时（如上所述），它也会正确呈现。

这个问题可能与FontAwesome或.breadcrumb__text::after和flexbox有关吗？

代码

HTML 

text-indent

CSS 

<body>

  <div class="layout_wrapper">

    <div class="layout_container__content">
      <div class="content">
        <header class="content__header">

          <div class="breadcrumb">
            <span class="breadcrumb__text  breadcrumb__text--first">From </span><a class="breadcrumb__link" href="#">Dashboard</a><span class="breadcrumb__text"> to </span><a class="breadcrumb__link" href="#">Find records</a><span class="breadcrumb__text"> to </span>
            <h1 class="breadcrumb__current">Kylo Ren’s Command Shuttle™</h1>
          </div>

          <ul class="page_tools">
            <li class="page_tools__item">
              <button type="button" class="button  button--primary">Save</button>
            </li>
            <li class="page_tools__item">
              <button type="button" class="button">Cancel</button>
            </li>
          </ul>

        </header>

      </div>
    </div>

    <div class="layout_container__sidebar">

      <div class="sidebar">
        <article class="widget">
          <h2 class="widget__title">Widget</h2>
        </article>
      </div>

    </div>

  </div>
</body>

4 个答案:

答案 0 :(得分：8)

我刚刚审核完您的代码并注意到以下内容：

  • 有不必要的（嵌套的）flex容器（由display: flex;引起）。
  • 有不必要的与flex相关的声明（仅声明默认行为，例如flex-flow: row no-wrap;和align-items: stretch）。
  • 在各种不相关的选择器的上下文中有几个不必要的声明。在测试/调试时可能会遗留下来的声明。

那就是说，让我们继续你的问题。这不明显，所以需要一些介绍。

Pangloss介绍了您问题的一个重要因素，它会影响您使用text-indent。来自W3：

  

该框相对于线框的左边（或右边，右边到左边的布局）边缘缩进。用户代理必须将此缩进呈现为空格。

     

[...]

     

如果text-indent的值为负或超过块的宽度，则上述第一个框可以溢出块。 overflow的值将影响溢出块的文本是否可见。

换句话说：text-indent会影响您应用它的框的尺寸。

您已在overflow: hidden;上声明.breadcrumb__text。显然，为了使该声明具有所需效果，您应用它的框需要width，否则它将没有剪切边缘。

.breadcrumb__text应该从应用于它的flex-basis声明（特别是flex: 0 0 2em;）获取其宽度。嗯...至少没有发生，而不是像你期望的那样完全。尽管它的宽度似乎是2em，但由于某种原因它不会触发溢出行为。这似乎是您使用的特定Chrome版本中的一个错误，因为它在Canary中已修复（例如，版本49及更高版本）。

所以：这似乎是Chrome中的flexbox实现的一个问题。也就是说，凭借这些知识，您的问题可以通过多种方式得到解决。一些例子：

text-indent: -100%

使用text-indent: -100%修复了您的问题，因为它会占用受影响元素右侧的额外空格。 （→jsfiddle）

width: 2em

您可以将声明width: 2em添加到.breadcrumb__text。这将解决flex-basis声明的意外行为。 （→jsfiddle）

父容器上的

overflow: hidden;

在overflow: hidden;上添加.breadcrumbs可以解决您的问题。现在，父容器具有剪切边缘并处理由text-indent: 100%引起的空白。 （→jsfiddle）

最后的评论

Flexbox是一种功能强大的布局模式，非常适合尝试。但是，算法很复杂，浏览器实现还没有解决问题。确保在使用flexbox时考虑到这一点。

查看代码时的另一个问题是您使用flexbox的方式。 Flexbox可供您使用，但它不一定要替换处理布局的其他方式。 display: inline-block;或display: table;，甚至float可能会在不引入嵌套Flex容器的复杂性的情况下完成工作。

答案 1 :(得分：3)

FontAwesome字体不是根本原因。它是您浏览器中默认设置的H1“块”布局定义。将此样式添加到breadcrumb__current类中。见https://jsfiddle.net/44gymmw2/9/ 

Int32Array

H1标签是一个块级元素，它会使整个页面上的内容被推送。另一个修复方法是将其从块更改为内联，如下所示：

 word-wrap:break-word

或者您可以将该文本包装在另一个元素中，例如span。

答案 2 :(得分：1)

我认为这个问题是由text-indent:100%规则引起的，它在右侧增加了额外的空间。

  

text-indent属性指定应该有多少水平空间   留在文本内容第一行开头之前   一个元素。相对于包含块的 <percentage>值   宽度即可。 - MDN

看到这个简单的演示：

＆＃13;
＆＃13; 
body {
  width: 200px;
  border: 1px solid red;
}
span {
  text-indent: 100%;
  display: inline-block;
}
＆＃13; 
<span>text</span>
＆＃13;
＆＃13;
＆＃13;

在您的示例中，您只需将text-indent:100%更改为text-indent:-9999px，它的工作方式类似，但不会创建溢出。

<强> Updated jsfiddle

答案 3 :(得分：1)

尝试使用内联块属性，它运行良好。

.content {
  display:inline-block;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
}
相关问题
最新问题