html – 使用FontAwesome时,Flexbox大小调整不正确
我正在面对我的页面布局的flexbox非常奇怪的行为。我正在使用FontAwesome渲染某些符号。
基本上,我在另一个flexbox项目中有2个flexbox项目,这些子项目比父项目更宽。 1)我有一个.content__header对象,它被渲染为另一系列flexbox对象中的一个flexbox对象。 2).content__header对象包含2个子对象:.breadcrumb和.page_tools。这些子对象也被渲染为flex项。 3)在.breadcrumb对象中,我有一些span对象(.breadcrumb__test)的内容被一个FontAwesome图标替换。使用:: after伪元素的绝对定位完成替换。 4)当我删除所有.breadcrumb__text HTML元素,或者从我的样式表中删除.breadcrumb__text :: after定义后,它定义了FontAwesome字体的使用 – 子对象(.breadcrumb和.page_tools)以正确的宽度呈现。所以我想这与FontAwesome图标的替换有关。 .breadcrumb__text::after { font-family: "FontAwesome"; font-weight: 400; } 视觉表示的问题 绿线表示父宽度与实际内容之间的差异。 代码&小提琴下面。 浏览器:Google Chrome 47.0.2526.106 m 小提琴: https://jsfiddle.net/44gymmw2/6/ 更新 当我删除文本缩进:100%;从.breadcrumb__text CSS定义,.breadcrumb按照预期呈现。但是,当我离开文本缩进位置,并在样式表顶部的定义后删除.breadcrumb__text ::(如上所述),它也正确呈现。 可能这个问题与FontAwesome还是文本缩进和flexbox有关? 码 HTML <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> CSS /* Removing this makes it work */ .breadcrumb__text::after { font-family: "FontAwesome"; font-weight: 400; } /* Don't remove anything below */ .breadcrumb__text--first { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0); border: 0; } * { box-sizing: inherit; } html { box-sizing: border-box; } html,body { padding: 0; margin: 0; } body { display: flex; flex-flow: column nowrap; align-items: stretch; } .layout_wrapper { flex: 1 1 auto; display: flex; flex-flow: row nowrap; align-items: stretch; } .layout_container__content { flex: 0 0 75vw; } .layout_container__sidebar { flex: 0 0 25vw; } .content { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: stretch; } .content__header { outline: 1px solid blue; background-color: #434649; color: #ffffff; flex: 0 0 100%; display: flex; flex-flow: row nowrap; } .breadcrumb { outline: 3px dashed purple; flex: 1 1 auto; display: flex; flex-flow: row wrap; justify-content: flex-start; } .breadcrumb__text { flex: 0 0 2em; overflow: hidden; text-indent: 100%; white-space: nowrap; position: relative; text-align: center; } .breadcrumb__text::after { content: 'f105'; padding: 0; text-indent: 0; position: absolute; top: 0; right: 0; width: 100%; } .breadcrumb__text--first { flex: 0 0 0; } .breadcrumb__text--first::after { content: none; } .breadcrumb__link { flex: 0 0 auto; display: inline-block; font-size: 0.8571rem; } .breadcrumb__current { flex: 0 0 100%; margin: 0; } .page_tools { outline: 3px dashed red; flex: 0 0 auto; display: flex; flex-flow: row nowrap; list-style: none outside none; } 解决方法
我刚刚完成了对你的代码的审查,并注意到以下几点:
>有不必要的(嵌套的)Flex容器(由使用display:flex引起)。 也就是说,让我们继续你的问题。这不是很明显,所以需要一些介绍。 Pangloss引入了您的问题的一个重要组成部分,影响使用文本缩进。从W3:
换句话说:文本缩进影响您应用它的框的尺寸。 你已经声明了overflow:hidden;在.breadcrumb__text上。显然,为了使声明具有预期的效果,你应用它的框需要一个宽度,否则它不会有一个剪辑边。 .breadcrumb__text应该从应用于它的flex-based声明(特别是flex:0 0 2em;)获取它的宽度。嗯,这没有发生,至少,不完全是你所期望的。即使它的宽度似乎是2em,由于某种原因,它不会触发溢出行为,因为它应该。这似乎是您使用的特定Chrome版本的错误,因为它在加那利(例如版本49及更高版本)固定。 所以:这似乎是Chrome中Flexbox实现的一个问题。也就是说,有了这个知识,你的问题可以通过多种方式来解决。一些例子: 文本缩进:-100% 使用text-indent:-100%可以解决您的问题,因为它会占用受影响元素右侧的额外空格。 (→jsfiddle) 宽度:2em 您可以将声明宽度:2em添加到.breadcrumb__text。这将修复flex-based声明的意外行为。 (→jsfiddle) 溢出:隐藏;在父容器上 添加overflow:hidden;在.breadcrumbs修复你的问题。现在,父容器有一个裁剪边,并处理由使用text-indent:100%引起的空格。 (→jsfiddle) 最后言论 Flexbox是一个强大的布局模式,它确实是伟大的实验。但是,这些算法是复杂的,浏览器的实现还没有解决问题。确保在使用flexbox时考虑到这一点。 查看代码时的另一个问题是使用flexbox的方式。 Flexbox可供您使用,但不一定需要替换处理布局的其他方式。显示:inline-block;或显示:表;甚至浮动可以做这个工作,而不会引入嵌套的flex容器的复杂性。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |