Question

我在元素中使用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的技术解释是什么？我想将它报告给错误跟踪器，但我不知道如何呈现它（我认为在错误跟踪器中提问这个问题是不合适的。）

Answer 1

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

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

在我的图像动画中看到的是我无法重现的，想到一种方法是使一个绝对定位的项目中心垂直穿越浏览器，就是使用figure.right > h3 { position: absolute; top: 50%; /* added */ transform: translateY(-50%); /* added */ right: 0; text-align: left }。

camera.setOnClickListener(new android.view.View.OnClickListener() {
            @Override
            public void onClick(View view) {
                try {
                    if(Build.VERSION.SDK_INT>=24){
                        try{
                            Method m = StrictMode.class.getMethod("disableDeathOnFileUriExposure");
                            m.invoke(null);
                        }catch(Exception e){
                            e.printStackTrace();
                        }
                    }

                    try {
                        Thread.sleep(500);
                    } catch (InterruptedException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }
                    Intent intent = new Intent("android.media.action.IMAGE_CAPTURE");
                    intent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(mFileTemp));
                    startActivityForResult(intent, RESULT_FROM_CAMERA);

                } catch (ActivityNotFoundException e) {
                    // Log.d(TAG, "cannot take picture", e);
                }

            }
        });

Updated fiddle

Answer 2

当你有一个绝对定位的元素时，它的父元素需要有return NULL;才能充当绝对定位元素的锚点。因此，在上面的代码中，position:relative;需要figure.left position:relative;才能正常工作。

在Firefox中使用css：align-items center（flexbox）可视错误

2 个答案: