Css 垂直形态与过渡专长。微软边缘

Css 垂直形态与过渡专长。微软边缘,css,css-transitions,microsoft-edge,Css,Css Transitions,Microsoft Edge,我在处理带有垂直过渡的逐步表单时遇到了一些Microsoft Edge和CSS方面的问题。 所有步骤都有一个position:absolute属性。父容器(包含步骤的容器)具有position:relative属性 当前的步骤显示在屏幕的中间。 表单的每个下一步,然后将当前步骤“推”到顶部以取代其位置,隐藏在页面底部,底部为底部:-100%。 然后,上一步有top:-100%转到并隐藏页面顶部 在MicrosoftEdge中,前两步非常有效。然后,当到达第三步时,底部:-100%突然开始起作用,

我在处理带有垂直过渡的逐步表单时遇到了一些Microsoft Edge和CSS方面的问题。 所有步骤都有一个
position:absolute
属性。父容器(包含步骤的容器)具有
position:relative
属性

当前的步骤显示在屏幕的中间。 表单的每个下一步,然后将当前步骤“推”到顶部以取代其位置,隐藏在页面底部,底部为

底部:-100%
。 然后,上一步有
top:-100%
转到并隐藏页面顶部

在MicrosoftEdge中,前两步非常有效。然后,当到达第三步时,
底部:-100%
突然开始起作用,好像它是一个
底部:0px
,这导致我的所有步骤都堆积在屏幕底部,全部显示出来,留下丑陋和不可用的表单

不用说,我在Chrome和Firefox中都没有问题。关于Edge如何处理带有
position:absolute
标记的元素,我是否应该知道一些特别的事情

以下是在其他浏览器中运行良好的图形:

尝试使用百分比以外的值,可能:

Top: 100vh;

欢迎来到堆栈溢出!寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码,最好是以最短的代码。看见