Flexbox和绝对定位在Chrome和Safari中不起作用

Question

我有一个按钮类，具有以下样式：

.button {
  align-items: center;
  background-color: #fff;
  border: 2px solid;
  border-color: #f48120;
  color: #f48120;
  cursor: pointer;
  display: inline-flex;
  font-size: 20px;
  font-weight: bold;
  justify-content: center;
  margin-bottom: 5px;
  padding: 3px 10px;
  position: relative;
  text-transform: lowercase;
}
.button::after {
  background-color: #fff;
  bottom: -4px;
  content: 'f111';
  display: flex;
  font-family: 'FontAwesome';
  font-size: 5px;
  justify-content: center;
  position: absolute;
  width: 25%;
}

<button class="button">Enviar</button>

如果我取消选中，然后再次检查"位置：绝对"。属性在检查员中，圆圈在中心对齐。这是眨眼/webkit错误吗？

Answer 1

绝对元素不会由父母对齐。只需将其放置在左侧并将其转换为中心即可。

只是一个旁注，无需在绝对元素上使用 display: flex;。

.button {
  align-items: center;
  background-color: deeppink;
  border: 2px solid;
  border-color: aqua;
  cursor: pointer;
  display: inline-flex;
  font-size: 20px;
  font-weight: bold;
  justify-content: center;
  margin-bottom: 5px;
  padding: 3px 10px;
  position: relative;
  text-transform: lowercase;
}
.button:after {
  content: '';
  background-color: deepskyblue;
  bottom: -4px;
  font-size: 5px;
  position: absolute;
  width: 25%;
  height: 10px;
  left: 50%;
  transform: translateX(-50%);
}

<button type="button" class="button">Submit</button>

Answer 2

要考虑的四件事：

1. 绝对位置的Flex项目不接受父母的flex属性。因为它们是流量的，所以从flex格式上下文上下文删除了flex容器的绝对位置的孩子，然后返回到块格式化上下文(或其他盒子模型(。

2. HTML <button>元素不能是Flex容器。

3. 绝对位置的弹性项目可能不会从某些浏览器中的正常流中删除。

4. flexbox中图像上的中心文本