在Firefox 36中存在FlexBox和空格之间的问题.由于Firefox中的未知间隔空间不正确(导致左侧奇怪的边距),但在Google Chrome中是完美的.
CSS
.form-status {
display: flex;
justify-content: space-between;
position: relative;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: $gray;
}
.step {
position: relative;
text-align: center;
padding-top: 15px;
color: $gray-light;
&:after {
content: "";
position: absolute;
height: 8px;
width: 8px;
border-radius: 50%;
top: -11px;
left: 50%;
margin-left: -11px;
background: $gray;
border: 8px solid #0c0616;
Box-sizing: content-Box;
}
&:first-child,&:last-child {
&:before {
content: "";
position: absolute;
top: 0;
left: -100vw;
right: 0;
height: 1px;
background: black;
}
}
&:first-child:before { right: 50%; }
&:last-child:before { left: 50%; }
&.active {
color: white;
&:after { background: $brand-yellow; }
}
}
}
HTML
<div class="page-section page-section-dark page-section-narrow">
<div class="container">
<div class="form-status">
<div class="step {{#ifeq step "one"}}active{{/ifeq}}">
Basic Information
</div>
<div class="step {{#ifeq step "two"}}active{{/ifeq}}">
Agreement
</div>
<div class="step {{#ifeq step "three"}}active{{/ifeq}}">
Payment
</div>
</div>
</div>
</div>
解决方法
问题来自于您最后一页的样式：
.form-status:before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:1px;
background:#555
}
(我以为你的原始问题来自“&：before”).
.form-status是一个flex容器,这给它一个绝对定位的孩子 – 对Flex容器doesn’t quite work interoperably yet的孩子绝对定位 – 显然IE(或他们的下一代“Spartan”)是唯一的浏览器来实现现在最新的规范文本.
这种造型会打破你的布局,因为绝对定位的孩子丢下一个看不见的0大小的“占位符”,它形成一个0尺寸的flex项目,而flex项目通过参与空格对齐来影响所有其他flex项目的定位. (这是earlier version of the flexbox spec所要求的,但更改为不再要求这些占位符形成flex项目.)
我打算在FlexBox的这个方面(here’s the bug on that)将Firefox更新为最新版本,但与此同时,我建议避免在FlexBox的任何直接孩子上使用绝对定位,因为它在每个浏览器现在.
*(更新：这是now fixed在Firefox中继构建,修复将暂时在Firefox 52,我相信在2017年3月发货.)
