Question

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

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

这是我拥有的Sass。我一直在玩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;
    }
}

Answer 1

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显然没有做任何事情。现在，所有主流浏览器的性能都相似。

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

1 个答案: