关于flex布局在IE浏览器上的坑

最新推荐文章于 2023-07-04 17:08:09 发布
最新推荐文章于 2023-07-04 17:08:09 发布
阅读量3.9w 收藏 13
点赞数 5
分类专栏： 前端 文章标签： 前端 flex ie 兼容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heyNewbie/article/details/101302169
版权

最近在项目中，钟情于flex布局来搭架子，感觉确实是挺方便的，但是今天遇到一个挺玄幻的问题，flex-direction 属性在IE中执行力并不好，

代码就不贴出来了，毕竟是公司财产，

情景：并排的表格，在浏览器尺寸改变时，变更排列方式，结果在方法执行的时候，元素表格消失了，是的，消失了！！！

找到最后，发现是flex-direction: colum这个属性不能够执行，

经过百度，发现是因为flex: 1 在IE中解析出的是1 1 0 ，并不是1 1 auto,

所以把元素的flex: 1 更改为flex-grow: 1 就可以啦

具体请参照这里这里这里

heyNewbie
关注
专栏目录
flex布局
m0_59508634的博客
03-22 648
标准盒子模型：宽度=内容的宽度（content）+ border（边框） + padding（内边距） + margin（外边距）低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin。
element UI中flex布局下el-table宽度自适应在IE下出现一直加载宽度的bug解决
u013994400的博客
03-01 642
element-ui 表格列会动态持续增加
flex布局在ie浏览器中flex-direction: column元素不生效的问题
anny_mei的博客
11-25 4823
今天测试发现项目在ie浏览器下面,原本应该竖着排列的两个盒子压在一起了,经过调试发现是flex-direction: column;这个指令失效了. 经过我冷静的分析(其实是百度之下),发现是兼容的问题,然后把flex: 1 更改为flex-grow: 1 就可以了! 看看https://blog.csdn.net/heyNewbie/article/details/101302169 ...
Flex布局在IE中的兼容性问题总结
scry丶坏坏的博客
05-22 4872
Flex布局在IE中的兼容性问题总结 以下代码片段没有特别说明，则均为有兼容性问题的代码 一、在IE10和IE11中，父容器中flex-direction:column 和 align-items:center，这俩属性同时存在， 子容器内容过多会溢出容器 <style> .FlexContainer { background: hsla(0,0%,0%,.1); display: flex; flex-direction: column; height: 2
flex在IE 10-11的内容溢出表现
Fimooo的博客
03-26 2034
今天在调页面的自适应，将页面的骨架用flex布局了，然后在IE中出现了溢出的现象。 布局如下: 结果在main主题中，left\center\right，怎么拉伸IE11浏览器都不换行，而且出现内容溢出的效果。 经搜查…发现… IE11对flex子元素的flex属性不像其他浏览器（chrome、Firefox等）一样。 flex:1 在chrome、Firefox等浏览器下，会默认成flex...
flex 下对齐_Flex 布局大全
weixin_39531183的博客
11-30 398
在讲Flex前先准备一下基础的盒模型及样式:<.作用于容器（父元素）的属性1、flex-direction用于指定Flex主轴的方向，继而决定 Flex子项在Flex容器中的位置取值：row：默认值，表示水平方向从左到右排列，此时水平方向轴线为主轴row-reverse：与row相反column：表示垂直方向从上到下排列，此时垂直方向轴线为主轴column-reverse：与column相反...
flex弹性盒布局在ie浏览器中的那些兼容性问题
学思QAQ的博客
01-13 2699
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布局ie浏览器兼容问题
01-10
在IE浏览器中，Flex布局存在一些兼容性问题。以下是一些常见的问题和解决方法： 1. Flex容器的宽度问题： 在IE浏览器中，Flex容器的宽度计算方式与其他浏览器不同。解决方法是给Flex容器添加`width`属性，并设置一...
flex 平铺布局_flex 布局 自适应 靠左对齐
weixin_36287059的博客
01-14 2595
需求假设我有5个300px*300px的卡片，需要根据屏幕宽度自适用平铺排列，并在换行的时候靠左对齐。不能用js实现，用js就太简单了，而且代码会比较啰嗦和让人困扰。核心知识利用flex容器的justify-content: flex-start和flex-wrap: wrap完成自动换行靠左需求利用calc和margin-left完成子项目平铺需求单单利用justify-content: spa...
flex 布局能用ie
最新发布
08-08
IE浏览器对CSS Flexbox的支持主要在IE10及以后版本，IE11版本开始有了相对完整的支持。在更早的版本（如IE9或更低）中，Flexbox功能通常是缺失的。 如果你想在IE上使用flex布局，你可以考虑以下方案： 1. 使用...
IE9兼容flex布局,以及CSS3
weixin_44025495的博客
11-26 5193
大家习惯上了flex布局，如果要兼容IE9，怎么办呢，先看看flex的兼容: 笔者从一位大佬偶然得知，一个兼容flex的方法，效果图如下: IE9能看到css3的效果，还有flex局部 下面 demo代码。 // An highlighted block <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte
flex 在html中显示不出来,Flexbox和Internet Explorer 11（在中显示：flex？）
weixin_39756336的博客
06-15 98
I am planning to move away from "floaty" layouts and use CSS flexbox for future projects. I was delighted to see that all major browsers in their current versions seem to support (in one way or anothe...
html高度自适应vue,【报Bug】nvue页面flex布局不会自适应高度问题
weixin_42356378的博客
06-27 1234
我设置100%也不管用！{{newsItem.title}}{{newsItem.remark}}{{newsItem.subject}}50{{newsItem.txbtype}}{{newsItem.addtime}}export default {props: {newsItem: {type: Object,default: function(e) {return {}}}},method...
elementui前端flex布局兼容IE10浏览器常用属性使用
Gorden的博客
07-04 2085
ie10兼容flex
flex:1在IE与谷歌浏览器中效果不一样：在IE中文字被后面的的元素遮挡，变垂直，没有正常显示
weixin_44370837的博客
04-20 1067
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 遇到的问题： 今天在适用flex布局时，遇到了flex:1;在谷歌和IE浏览器中显示不一样的问题。谷歌浏览器的效果与预期相符合。 预期效果: IE浏览器的效果图： 完整的页面代码： <!DOCTYPE html> <html lang="en"> <head> <meta cha
flex弹性布局中的flex：1的理解
杜永康的博客
11-30 1985
有了这个属性后，不管是以元素宽度均分元素，还是给元素均分空间，都得到了实现。在实际开发中，以响应式为标准去完成的项目，更符合用户体验，也是基本要求。关于响应式的布局，其实还有一个属性，那就是css函数calc（）也可以做到，此函数可以实现均分，或者按照自己的意愿分配空间。如果我们的容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素。弹性布局是非常常用，且好用的布局方式。言外之意，flex：1操作的是空间，给元素分配空间的办法。关于项目属性，如果深挖，拓展，那么还有一个常用的属性，就是。
前端--flex布局在ie11浏览器中使用flex-direction: column后子元素flex:1不生效的问题
qq_42750608的博客
03-19 3350
flex布局在ie浏览器中flex-direction: column元素后子元素flex:1不生效的问题 flex: 1 是 flex-grow: 1;flex-shrink:1;flex-basis: 0%;的缩写 而情况就是chrome浏览器正常显示,ie浏览器不行; 但若是将chrome浏览器的改为 flex-grow: 1;flex-shrink:1;flex-basis: 0px;也出现和ie浏览器一样的情况 解决方法: 改成flex: 1 1 auto;就行了 ...
el-table在flex布局下宽度不能自适应的解决方法
Komorebi_00的博客
10-28 3486
上，flex容器下的width:100%会一直向上继承，直到flex容器下第一级子元素，但是当某个子元素的宽度出现固定值并且大于flex伸展的宽度的时候，那么容器就不会收缩，也就触发不了resize事件了。el-table外多包裹一层div，包裹的容器设置绝对定位及宽度，继承父级宽度。组件的宽度是动态计算的，源码中resize事件绑定在。只能自适应扩大，不能自适应缩小。（给表格的父元素加）flex属性的容器设置相对定位。注意：这样会影响下面的元素。使用flex布局，使用。
Flex布局自适应失效的问题
m0_47531829的博客
06-12 1444
Flex布局下，white-space:nowrap导致布局自适应失效的解决办法！
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值