文章/答案/技术大牛

发布

社区首页 >问答首页 >在firefox和safari中，flexbox未正确对齐:after & :before

问在firefox和safari中，flexbox未正确对齐:after & :before
EN

Stack Overflow用户

提问于 2017-03-14 10:24:49

回答 1查看 490关注 0票数 1

我正在制作一个加载动画。我的问题是，只有在Chrome中才能将这些放在flexbox中。:before和:after在火狐中位于父目录的底部，在safari中位于顶部。

#pulse-box {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pulse {
  position: relative;
  width: 12.5px;
  height: 50px;
  animation: pulse 750ms infinite;
  animation-delay: 250ms;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pulse:before,
#pulse:after {
  content: '';
  position: absolute;
  display: block;
  width: 12.5px;
  height: 33.3px;
  background: #efefef;
  animation: pulse 750ms infinite;
}

#pulse:before {
  left: -25px;
  /*  -(pulse height / 1.5) */
}

#pulse:after {
  left: 25px;
  /* (pulse height / 1.5) */
  animation-delay: 500ms;
}

@keyframes pulse {
  0%,
  10% {
    background: #efefef;
  }
  50% {
    background: #5b5b5b;
  }
}

<div id="pulse-box">
  <div id="pulse" />
</div>

您也可以在我制作的jsfiddle中看到这一点。

flexbox

css

firefox

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-14 10:43:55

试一下..。

#pulse::before, #pulse::after {
    content: '';
    position: absolute;
    display: block;
    width: 12.5px;
    height: 33.3px;
    background: #efefef;
    animation: pulse 750ms infinite;
    top: 50%;
    transform: translateY(-50%);
}

https://jsfiddle.net/opt4jmmt/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42776744

复制

相似问题

问在firefox和safari中，flexbox未正确对齐:after & :before
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在firefox和safari中，flexbox未正确对齐:after & :beforeEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在firefox和safari中，flexbox未正确对齐:after & :before
EN