鍍金池/ 問答/HTML5  HTML/ 360瀏覽器在兼容模式下,采用display:flex;overflow-y:a

360瀏覽器在兼容模式下,采用display:flex;overflow-y:auto設置樣式,為什么還是會出現(xiàn)元素擠壓?

360瀏覽器在兼容模式下(極速模式下以及谷歌和火狐都正常),采用display:flex;overflow-y:auto來設置樣式,出現(xiàn)了Y軸滾動條,為什么還是會出現(xiàn)元素擠壓?如下圖一所示。而圖二是沒有超出內(nèi)容,也沒有顯示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

回答
編輯回答
念初

360兼容模式使用的是IE7內(nèi)核,所以flex杯具。

2018年3月2日 05:32