css - IE11消息栏从底部向上飞，而不是从顶部向上飞

我有一个隐藏的消息栏，除非服务器响应一条消息以渲染某些内容（例如“密码和用户名无效”。）。然后从顶部开始显示消息。

在最新版本的Chrome，Edge，Safari和Firefox中，此功能正常运行。在IE中，它从浏览器底部向上飞过查看区域，然后在可见时将其安装在应有的位置。

这就是我的无礼。我一直在玩transform和transition以获得正确的结果，而不影响其他浏览器。我没有能力，所以在寻找建议：

#messages {
    z-index: 999;
    position: fixed;
    width: 100%;

    .container {
        max-width: 890px;

        @media (max-width: 992px) and (min-width: 768px) {
            max-width: 720px;

        }

        @media (max-width: 767px) and (min-width: 576px) {
            max-width: 510px;
            padding-left: 0px;
            padding-right: 0px;
        }
    }

    a {
        color: #FFF;
        font-weight: bold;
    }

    i {
        cursor: pointer;
        padding-top: 3px;
    }

    .hide-messages-bar {
        color: #FFF;
        position: relative;
        top: 105px;
        transform: translateY(-5vh);
        transition: transform 0.5s ease-in-out;
        box-shadow: 0 1px 6px 2px #333
    }

    .hide-messages-bar.show-success-messages-bar {
        background-color: $green;
        transform: translateY(0vh);
        padding: 8px 0;
    }

    .hide-messages-bar.show-error-messages-bar {
        background-color: $red;
        transform: translateY(0vh);
        padding: 8px 0;
    }
}

最佳答案

arbuthnott让我指出了正确的方向。事实证明px也可以正常工作，所以我改用了。很难让%的行为与其他浏览器中的行为相同。

使用此工具将vh转换为px：

https://jsfiddle.net/Dwaaren/j9zahaLL/

最后是这样的：

.hide-messages-bar {
    color: #FFF;
    position: relative;
    top: 105px;
    transform: translateY(-22.3px);
    transition: transform 0.5s ease-in-out;
    box-shadow: 0 1px 6px 2px #333
}

其他两个类上的0vh显然没有做任何事情，因此保持原样。现在，所有主要浏览器的性能都相似。

关于css - IE11消息栏从底部向上飞，而不是从顶部向上飞，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51954276/