css - parent 按钮上的 Flexbox 不适用于移动 chrome/safari 中的 child 伪选择器内容

Question

这是一个非常具体的问题......但是当父级是移动 safari 和 chrome 中的按钮时，flexbox 规则似乎不适用于伪选择器元素。

这里有一个代码笔可以清楚地证明这一点:http://codepen.io/anon/pen/zKaRXY

在桌面浏览器中，两个 block 的中间都应该有一个“t”。在移动浏览器中，只有一个在中间有这个“t”。

我已经将完整的计算样式从“div”复制并粘贴到“按钮”，但由于某种原因它仍然失败。

<div class="container">
  <button class="button">
    <div class="child"></div>
  </button>

  <div class="button">
    <div class="child"></div>
  </div>
</div>



.container {
  width: 900px;
  margin: 50px auto;
  font-family: "Arial", sans-serif;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background: #dbe8ff;
  width: 500px;
}


.child:before {
  content: "t";
  flex: 0 1 auto;
  background: #fff09b;
}

Answer 1

不仅仅是在移动设备上...您当前的布局从未将 flex 样式应用于伪元素。

伪元素是声明它们的元素的子元素。在这种情况下，它们是 .child 的子代。所以，他们是按钮的孙子，你的风格不起作用。

如果你想以这种方式设置伪类的样式，你必须在 child 上设置 display:flex。

之所以看到t居中，是因为child的维度调整为pseudo的维度，所以这个只能居中。