element-ui的dialog居中显示并且兼容ie11和edge

最新推荐文章于 2025-02-21 16:40:04 发布

夜照流歌

最新推荐文章于 2025-02-21 16:40:04 发布

阅读量1.5k

点赞数 1

分类专栏： ie兼容文章标签： css 前端

本文链接：https://blog.csdn.net/qq_37205080/article/details/106254631

版权

ie兼容专栏收录该内容

2 篇文章

订阅专栏

element-ui的dialog居中显示并且兼容ie11和edge

目标效果是让弹窗居中显示，下面是在百度上找到的代码：
https://www.cnblogs.com/IwishIcould/p/11992376.html

.el-dialog{
       display: flex;
       flex-direction: column;
       margin:0 !important;
       position:absolute;
       top:50%;
       left:50%;
       transform:translate(-50%,-50%);
   }
 
   .el-dialog .el-dialog__body{
       flex:1;
       overflow: auto;
   }

chorme完美显示，但是ie中弹窗居中是居中了，显示效果如下：
在这里插入图片描述
然后又去百度原因，以下是一些链接参考：
添加display：-ms-flex等兼容代码的原因
https://blog.csdn.net/mazhili1991/article/details/104476445/
https://www.cnblogs.com/SamWeb/p/9836497.html

添加max-height:75vh的原因
http://www.jquerycn.cn/a_30180

修改代码如下：

.el-dialog{
    display: flex;
    display: -ms-flex; /* 兼容IE */
    flex-direction: column;
    -ms-flex-direction: column; /* 兼容IE */
    margin:0 !important;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    max-height:calc(100% - 30px);
    max-width:calc(100% - 30px);
  }
.el-dialog .el-dialog__body{
    padding: 20px;  /*这个不重要*/
    max-height: 75vh;
    flex: 1;
    -ms-flex: 1 1 auto; /* 兼容IE */
    overflow-y: auto;
    overflow-x: hidden;
}

.el-dialog__wrapper {
    overflow: hidden;/*隐藏ie和edge中遮罩的滚动条*/
}