elementui前端flex布局兼容IE10浏览器常用属性使用

最新推荐文章于 2025-02-19 08:28:33 发布
最新推荐文章于 2025-02-19 08:28:33 发布
阅读量2.2k 收藏 6
点赞数
文章标签： 前端 elementui javascript
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_36501591/article/details/131538959
版权
文章详细列举了使用Flex布局在Chrome和IE10中的语法差异，并提供了兼容性写法，包括不同浏览器下的display属性、flex-direction、justify-content、align-items等样式设置，以确保在IE10及以下版本的浏览器中正常工作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

IE10以下完全不兼容flex，IE10部分兼容，使用时对应chrome的用法为如下所示：

chrome　　　　　　　　　　　　　　　   IE10

display: flex; 　　　　　　　　　　　 display: -ms-flexbox;

flex-direction: column;　　　　　　　-ms-flex-direction: column;

justify-content: center; 　　　　　　-ms-flex-pack: center;

justify-content:space-between;　　　 -ms-flex-pack: justify;

justify-content:space-around;　　　　-ms-flex-pack: justify; // 无法实现，用justfiy代替

justify-content: flex-end;　　　　　 -ms-flex-pack: end;

align-items: flex-start;　　　　　　　-ms-flex-align: start;

align-items: center;　　　　　  　　　-ms-flex-align: center;

align-items: flex-end;　　　　　　　　-ms-flex-align: end;

align-items: baseline;　　　　　　　　-ms-flex-align: baseline;

flex: 1;　　　　　　　　　　　　　　　　-ms-flex: 1;

align-self: center;　　　　　 　　　　-ms-align-self: center;

flex-wrap: wrap; 　　　　　　　　　　 -ms-flex-wrap: wrap;

注：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 inherit。

一、常用的flex布局兼容性写法

//定义flex
.flex{

    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */

    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

    display: -moz-box;      /* 老版本语法: Firefox (buggy) */

    display: -ms-flexbox;   /* 混合版本语法: IE 10 */  

    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */

}



//主轴为水平方向，起点在左边
.flex-row {

  -webkit-flex-direction: row;

  -moz-flex-direction: row;

  -ms-flex-direction: row;

  flex-direction: row;

}



//主轴为垂直方向，起点在上沿
.flex-column {

  -webkit-box-direction: normal;

  -webkit-box-orient: vertical;

  -moz-flex-direction: column;

  -webkit-flex-direction: column;

  flex-direction: column;

}



//伸缩宽度
.flex-1 {

  -webkit-flex: 1;        /* 新版本语法: Chrome 21+ */

  flex: 1;                /* 新版本语法: Opera 12.1, Firefox 22+ */

  -webkit-box-flex: 1;    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

  -moz-box-flex: 1;       /* 老版本语法: Firefox (buggy) */

  -ms-flex: 1;            /* 混合版本语法: IE 10 */  

}



// 主轴左对齐
.flex-justify-start{

  -webkit-box-pack: start;

  -webkit-justify-content: flex-start;

  -moz-justify-content: flex-start;

  -ms-justify-content: flex-start;

  justify-content: flex-start;

}



// 主轴右对齐
.flex-justify-end{

  -webkit-box-pack: end;

  -webkit-justify-content: flex-end;

  -moz-justify-content: flex-end;

  -ms-justify-content: flex-end;

  justify-content: flex-end;

}



// 主轴居中对齐
.flex-justify-center{

  -webkit-box-pack: center;

  -webkit-justify-content: center;

  -moz-justify-content: center;

  -ms-justify-content: center;

  justify-content: center;

}



// 主轴两端对齐,项目之间的间隔都相等
.flex-justify-between{

  -webkit-box-pack: justify;

  -webkit-justify-content: space-between;

  -moz-justify-content: space-between;

  -ms-justify-content: space-between;

  justify-content: space-between;

}



// 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
.flex-justify-around{

  -webkit-box-pack: distribute;

  -webkit-justify-content: space-around;

  -moz-justify-content: space-around;

  -ms-justify-content: space-around;

  justify-content: space-around;

}



// 交叉轴的起点对齐
.flex-align-start{

  -webkit-box-align: start;

  -webkit-align-items: flex-start;

  -moz-align-items: flex-start;

  -ms-align-items: flex-start;

  align-items: flex-start;

}



// 交叉轴的终点对齐
.flex-align-end{

  -webkit-box-align: end;

  -webkit-align-items: flex-end;

  -moz-align-items: flex-end;

  -ms-align-items: flex-end;

  align-items: flex-end;

}



// 交叉轴的中点对齐
.flex-align-center{

  -webkit-box-align: center;

  -webkit-align-items: center;

  -moz-align-items: center;

  -ms-align-items: center;

  align-items: center;

}



// 项目的第一行文字的基线对齐
.flex-align-baseline{

  -webkit-box-align: baseline;

  -webkit-align-items: baseline;

  -moz-align-items: baseline;

  -ms-align-items: baseline;

  align-items: baseline;

}



// （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
.flex-align-stretch{

  -webkit-box-align: stretch;

  -webkit-align-items: stretch;

  -moz-align-items: stretch;

  -ms-align-items: stretch;

  align-items: stretch;

}



// 换行，第一行在上方
.flex-wrap {

  -webkit-box-lines: multiple;

  -webkit-flex-wrap: wrap;

  -moz-flex-wrap: wrap;

  -ms-flex-wrap: wrap;

  -o-flex-wrap: wrap;

  flex-wrap: wrap;

}

二、在IE10浏览器中，使用flex布局的常用兼容性代码：

/*display*/
.display_flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.display_flex > *{
    display: block;
}
.display_inline-flex{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;    
}
.display_inline-flex > *{
    display: block;
}
/*伸缩流方向*/
.flex-direction_column{
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
/*主轴对齐*/
.justify-content_flex-center{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.justify-content_flex-end{
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.justify-content_flex-justify{
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
/*侧轴对齐*/
.align-items_flex-start{
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items_flex-end{
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items_center{
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.align-items_baseline{
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}
/*伸缩性*/
.flex_auto{
    -webkit-box-flex: 1;
    -ms-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}
.flex_1{
    width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;    
}
/*显示顺序*/
.order_2{
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
.order_3{
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
}

华为od 面试八股文_前端_01_含答案
MISAYAONE的博客
03-24 1954
华为od 面试八股文_前端_01_含答案
前端CSS：CSS单行、多行文本溢出省略号方法
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-26 1056
自定义省略号：使用伪元素或者背景图像来创建自定义的省略号样式。示例代码。
【ie浏览器的兼容】css flex布局兼容ie10, ie11, 问题吐血总结，菜鸟必看
qq_17335549的博客
05-11 3857
flex布局中的flex-shrink
关于Element UI中日期时间选择器在IE浏览器中初始化显示的兼容性问题
zhoushuizhang的博客
09-17 4556
一、简单说明 项目使用Vue+Element UI进行开发，使用了DateTimePicker 日期时间选择器。 二、问题描述 打开修改对话框（进行选择日期操作可以正常显示），在谷歌浏览器中初始化时能够显示日期和时间，但是一到IE浏览器中初始化时无法回填在显示框，不过控制台可以输出时间。 谷歌浏览器中： IE浏览器（11版）中： 三、解决方案 ...
前端开发中常见的浏览器兼容性问题及全方位解决方案的详细总结，涵盖 HTML、CSS、JavaScript、布局、API、移动端
最新发布
繁若华尘的博客
02-19 1751
统一代码规范：使用 Reset CSS、Modernizr 等工具。 分层兼容策略：根据用户浏览器占比决定兼容范围。 自动化检测：集成兼容性测试到 CI/CD 流程。 文档记录：维护浏览器兼容性矩阵表。
IE浏览器下flex布局的bug
ala27792的博客
10-11 1796
原文地址：gitub上的Flexbugslist，可以看到Flex布局在IE糟糕表现的详细描述。 2. Column flex items set toalign-items:centeroverflow their container flex 容器如果设置竖排，并且垂直居中，flex子项目的文字会溢出容器。解决办法是给子项目设置一个max-width:100%。Edge修...
flex布局兼容IE10
方寸之间
02-24 1万+
在IE10浏览器中，使用flex布局的常用兼容性代码： /*display*/ .display_flex{ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .display_flex > *{ display: block; } ....
html flex 兼容ie9,flex布局及其兼容解决方案_蓝戒的博客
weixin_39942318的博客
06-23 3895
导语：布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了众多主流浏览器的支持，这意味着，flex有了更多的用武之地。Flex布局是什么？Flex是Flexible Bo...
flex　兼容性写法 兼容ie10 谷歌 火狐
秦璐璐的博客帝国
04-27 1226
本次记录的主要内容在于　兼容写法　 下面的测试代码为常用的；具体的属性值，按照实际需求，自行修改 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de...
前端面试八股文（超详细）
热门推荐
m0_50861631的博客
03-06 16万+
JavaScript \1. Promise 的理解 Promise 是一种为了避免回调地狱的异步解决方案 2. Promise 是一种状态机： pending（进行中）、fulfilled（已成功）和rejected（已失败） 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。 回调地狱 回调函数中嵌套回调函数的情况就叫做回调地狱。 回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。 一、Promise是什么？ Promise是最早
Element-UI布局的兼容性解决方案：确保跨浏览器与设备的一致体验
[Element-UI布局的兼容性解决方案：确保跨浏览器与设备的一致体验](https://opengraph.githubassets.com/9202bf93a78133fc1b69676634f77d27da83e7de8e6c52064c203b7e565c4eab/swengy/SVG-UI-Elements) 参考资源链接...
flex 兼容IE8，flex兼容IE7,通过clear both清除浮动和float 实现兼容IE的flex布局
dcxia89的博客
03-29 1万+
  写在前面：   vue 配合 element-ui 布局时，因element布局容器默认flex布局，而ie9不兼容。为了使ie9上能良好的表现弹性布局，查找到以下博客，完美解决。xi一、float 布局float使元素脱离文档流，并且父元素内的其他的行内元素或者文本都会围绕着他放置。下面我们现写一段float的布局代码，来看一下float的作用。&lt;div class="fcont"&g...
flex弹性盒布局在ie浏览器中的那些兼容性问题
学思QAQ的博客
01-13 2824
1，在IE10和IE11中，父容器中flex-direction:column 和 align-items:center，这俩属性同时存在， 子容器内容过多会溢出容器。 解决方案：给子容器加max-width: 100% 2，IE10和IE11下，父容器flex-direction:row，子容器内容过多会溢出容器 解决方案：给子容器加max-width: 100% 3，IE11中，父容器flex-direction:column，img无法保持宽高比缩放 ...
flex布局
里昂的博客
11-11 760
flex布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 因为flex布局可以让子元素一行显示，不需要浮动，所以就不需要清除浮动 flex布局还可以设置盒子垂直居中，...
element ui 兼容低版本浏览器
m0_37780367的博客
09-03 1万+
基于ES6的用Vue框架element ui写的页面，如果当需要解决兼容低版本浏览器时，会遇到在低版本浏览器中不显示效果，页面一片空白，但控制台也不报错，而在高版本可以正常显示的情况。 低版本效果： 高版本效果： 代码片段： <div id="app"> <el-tree :data="data" :props="defaultProps" @node-cli...
display:flex；兼容浏览器写法
weixin_44283589的博客
08-14 1080
需要注意的是，这只是一个示例，实际使用时可能还需要考虑其他兼容性问题，并根据具体情况进行调整。如果你需要更全面的兼容性解决方案，建议使用 CSS 预处理器（如 Sass 或 Less）或使用相关的 CSS 库（如 Autoprefixer）来自动处理兼容性问题。
flex布局的兼容性
Aimee的博客
03-29 5242
一直以来用flex解决居中问题很方便，几个项目做下来，flex的兼容性问题也遇到了的，但最近的一个项目测试的时候，在一部ios8以下版本的iPhone上出现了不兼容。然后又就去研究了一下flex的兼容性，下面分享一下flex布局的兼容性写法。.flex { display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD -...
flex布局浏览器兼容问题
JerryChen12138的博客
12-15 4037
布局、浏览器、flex
flex布局兼容问题
weixin_33704591的博客
07-24 358
flex布局分为旧版本dispaly: box;，过渡版本dispaly: flex box;，以及现在的标准版本display: flex;。所以如果你只是写新版本的语法形式，是肯定存在兼容性问题的。 Android 2.3 开始就支持旧版本display:-webkit-box; 4.4 开始支持标准版本display: flex; IOS...
flex布局兼容IE8以上的浏览器，给出代码
06-03
要实现Flex布局并兼容IE8以上的浏览器，可以使用以下代码： ```html <div class="flex-container"> <div class="flex-item">Flex Item 1 <div class="flex-item">Flex Item 2 <div class="flex-item">Flex Item ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xinlianluohan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值