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

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

在最新版本的Chrome、Edge、Safari和Firefox中，这一切都很正常。在IE中，它从浏览器底部向上飞过查看区域，然后在可查看时安装在应该的位置

这就是我的无礼。我一直在玩弄

转换

和

转换

，以在不影响其他浏览器的情况下获得正确的结果。我没能，所以想寻求建议：

#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

：

结果是：

.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

显然没有做任何事情。现在所有主要的浏览器都有类似的表现。

听起来在转换中使用vw和vh单元存在IE特有的bug。根据容器元素的位置和大小，您可以使用百分比单位。