css：firefox 中的 align-items center (flexbox) 视觉错误答案

【问题标题】：css: align-items center (flexbox) visual bug in firefoxcss：firefox 中的 align-items center (flexbox) 视觉错误
【发布时间】：2018-02-26 10:46:45
【问题描述】：

在元素中使用 flexbox 和 align-items 然后在子元素中使用绝对定位时，我遇到了一个特定问题。

子元素中有一个视觉错误。在firefox中，<h3>元素——在figure.right中——出现在父级的顶部，无论是在铬中，相同的元素出现在父级的中间。在firefox中，如果我取消选择/选择检查器中的任何样式或调整窗口大小，它会自行纠正，所以当firefox刷新dom时，错误会自行修复.

我有以下 flexbox 元素：

<figure class="right">
    <h3><?= $lang->getW('h3_a_security') ?></h3>
    <figcaption>
        <p><?= $lang->getW('p_a_security') ?></p>
    </figcaption>
</figure>

还有 CSS：

* { position: relative; margin: 0; padding: 0 }

figure {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0 0 1vw
}
figure > h3,
figure > figcaption { width: 42.5% }
figure.left > h3 { text-align: right }
figure.right > h3 { position: absolute; right: 0; text-align: left }
figure > figcaption {
    padding: 1vw;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 5px rgba(230,230,230,0.6);
}
figure.left > figcaption { margin-left: auto }

仅此一项不会触发错误，但这基本上是我想要实现的。无论如何，我已经准备了一个小提琴，上面代码所属的完整结构，它演示了 firefox 中的错误：https://jsfiddle.net/cng5z8km/2/（只需调整输出窗口的大小即可查看）

请确认您也遇到了这种情况，如果可能，我该如何解决这个问题？还有，这个应该怎么报？我的意思是，这个错误的技术解释是什么？我想向 bug-tracker 报告它，但我不知道如何呈现（我想在 bug-tracker 中问这个问题是不合适的）。

【问题讨论】：

我看不出 Chrome 和 FF 的布局有什么不同。您使用的 FF 版本可能会有所不同。
考虑弹性容器的子元素，当绝对定位时，是不是弹性项目。他们不参与弹性布局。另请注意，不同的浏览器在呈现这些绝对定位的孩子时可能会有所不同。 stackoverflow.com/q/32991051/3597276
你确定？我可以使用 Firefox 在我的手机中看到问题。在铬中，figure.right 中的 <h3> 垂直居中，而在 Firefox 中则位于顶部。在 Firefox 中，当我调整窗口大小时，<h3> 它会自动落到中间。
我看不出 PC 桌面 Chrome 和 FF 有什么不同。但是，您可能需要考虑描述该错误。除了将其称为“视觉错误”之外，您的问题并没有真正提供问题的描述。
我刚刚尝试清理缓存和站点首选项，但没有任何效果，即使在私人模式下也是如此。我将保存密码并尝试切换到普通的 firefox，我目前正在使用 firefox-kde（安装的那个）。不过我明天再做，快凌晨 4 点了。

标签： css firefox flexbox

【解决方案1】：

当你有一个绝对定位元素时，它的父元素需要有position:relative; 才能作为绝对定位元素的锚。所以在你上面的代码中，figure.left 需要position:relative; 才能使figure.right > h3 { position: absolute; right: 0; text-align: left } 正常工作。

【讨论】：

对不起，我没提，我已经在css文件开头默认设置了position:relative;。您可以在小提琴中看到它。
另外，我改变了一些样式，从那以后就看不到错误了。只需添加文本，使其具有高度，您就可以看到它：jsfiddle.net/cng5z8km/2

【解决方案2】：

当您将弹性项目位置设为绝对位置时，您会遇到跨浏览器的不同行为，因为它们不一致（即在 Safari 中它的工作方式与在 Chrome 中不同）。

https://developers.google.com/web/updates/2016/06/absolute-positioned-children

在您的图像动画中看到的我无法重现，认为使绝对定位的项目中心垂直跨浏览器的一种方法是使用top: 50%; transform: translateY(-50%)。

figure.right > h3 { 
  position: absolute;
  top: 50%;                                /*  added  */
  transform: translateY(-50%);             /*  added  */
  right: 0;
  text-align: left 
}

Updated fiddle

【讨论】：