Flexbox上的按钮父母不工作上的孩子伪选择器内容在移动chrome/safari

Question

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

下面是一个代码来清楚地演示这一点:http://codepen.io/anon/pen/zKaRXY

在桌面浏览器中，两个块之间应该有一个"t"。在移动浏览器中，只有一个在中间有这个"t"。

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

<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

不只在手机上…您当前的布局从未对pseudo元素应用flex样式。

伪元素是声明它们的元素的子元素。在本例中，它们是.child的子对象。所以，它们是按钮的孙子，你的样式不起作用。

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

你看到t居中的原因是因为child的尺寸被调整为pseudo的尺寸，所以这个只能居中。

Answer 2

看来，在你第二次复制为<div class="button"> instead of <button class="button">