360浏览器在兼容模式下,采用display:flex;overflow-y:auto设置样式,为什么还是会出现元素挤压?

发布于 2022-09-07 15:54:06 字数 2651 浏览 17 评论 0

360浏览器在兼容模式下(极速模式下以及谷歌和火狐都正常),采用display:flex;overflow-y:auto来设置样式,出现了Y轴滚动条,为什么还是会出现元素挤压?如下图一所示。而图二是没有超出内容,也没有显示Y轴的就是样式正常。以下是样式代码,请大神指点!

 .el-checkbox-group{
                            display: -ms-flexbox;
                            display: flex;
                            -ms-flex-direction: column;
                            flex-direction: column;
                            padding: 10px 8px;
                            height: 450px;
                            overflow-y: auto;
                            label{
                                display: block;
                                line-height: 38px;
                                height: 38px;
                                //height: auto;
                                cursor: default;
                                .el-checkbox__label{
                                    font-size: 18px;
                                    font-weight: normal;
                                    cursor: pointer;
                                    color: #409EFF;
                                    text-decoration: underline;
                                    cursor: default;
                                    .game_id{
                                        display: inline-block;
                                        margin-right: 42px;
                                        color: #666;
                                        text-decoration: none;
                                    }
                                    a{
                                        display: inline-block;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        width: 140px;
                                    }
                                }
                                .el-checkbox__input{
                                    float: right;
                                    cursor: pointer;
                                    margin-top: 10px;
                                }
                            }
                            .el-checkbox__label{
                                cursor: default;
                            }
                            .el-checkbox{
                                margin-left: 0;
                            }
                        }

clipboard.png

clipboard.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

只怪假的太真实 2022-09-14 15:54:06

360兼容模式使用的是IE7内核,所以flex杯具。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文