flex在IE 10-11的内容溢出表现

最新推荐文章于 2024-05-07 14:01:16 发布
最新推荐文章于 2024-05-07 14:01:16 发布
阅读量2k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS布局 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Fimooo/article/details/88812795
本文介绍了在IE11浏览器中使用Flex布局时遇到的内容溢出问题及解决方法。通过对比Chrome、Firefox等浏览器的表现，发现IE11对于flex属性的默认处理不同，需要额外设置flex-basis:auto来实现正确的响应式布局。

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

今天在调页面的自适应，将页面的骨架用flex布局了，然后在IE中出现了溢出的现象。

布局如下:
在这里插入图片描述
结果在main主题中，left\center\right，怎么拉伸IE11浏览器都不换行，而且出现内容溢出的效果。
在这里插入图片描述

经搜查…发现…

IE11对flex子元素的flex属性不像其他浏览器（chrome、Firefox等）一样。

flex:1

  1. 在chrome、Firefox等浏览器下，会默认成flex:1 1 auto
  2. 在IE 10-11中会默认成flex:1 1 0

所以当我们设置子元素的flex的时候，多加一步，flex-basis:auto，即可正常显示。

有关flex的各浏览器兼容设置

flex内容溢出
Y_G_G的博客
09-04 2262
参考资料： Flex Basis与Width的区别 【CSS】flex-basis 文本溢出问题 flex溢出的根本原因是 flex-basis 解决方式： 设置width属性，一般设置为width: 0 min-width来限制， 一般也是min-width: 0; 设置overflow:hidden 为什么？ 设置width属性，只要width小于剩余空间即可，一般设置为width: 0;这样可百分之百确定小于剩余空间； 不设置width但用min-width来限制也是一样的，既然 flex
微信小程序（Flex布局---容器属性）
weixin_45343973的博客
08-17 775
容器与项目元素 日常开发中，采用Flex布局的元素，一般简称为“元素”。 容器内的元素简称为“项目”或“元素”。 例： 主轴与交叉轴 在介绍各个属性之前，需要先明确一个坐标轴。 水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis）。 容器与项目元素 布局属性： 容器属性： flex-flow、flex-direction、flex-wrap、justify-con...
使用flex布局时宽度auto的元素内容溢出
Liu
03-30 293
当flex布局的item元素设置为自适应宽度，但是他的实际宽度较大时就会溢出父元素，如下。
修复IE下相对定位子元素溢出Bug
歪脖先生的博客
02-26 620
相对定位子元素溢出Bug在页面上，常常使用 overflow 属性，来控制一个元素内容溢出时的处理方式。然而，在IE6和IE7中，当父元素设置了 overflow: auto 或 overflow: hidden，当子元素使用相对定位且高度大于父元素高度时，子元素就会溢出到父元素的外面。假设页面上有两个元素，#outter 为父元素，#inner 为子元素：<div id="outter"&...
关于flex布局在IE浏览器上的坑
heyNewbie的博客
09-24 3万+
最近在项目中，钟情于flex布局来搭架子，感觉确实是挺方便的，但是今天遇到一个挺玄幻的问题，flex-direction 属性在IE中执行力并不好， 代码就不贴出来了，毕竟是公司财产， 情景：并排的表格，在浏览器尺寸改变时，变更排列方式，结果在方法执行的时候，元素表格消失了，是的，消失了！！！ 找到最后，发现是flex-direction: colum这个属性不能够执行， 经过百度，发现是...
IE10中的Flexible Box("Flexbox")布局
07-30 935
经过这一系列对Flexbox的介绍，我想大家对Flexbox在布局中的使用以及其强大功能特性给我们布局带来的方便性都有所了解。话又说回来，虽然Flexbox功能强大（特别是弹性布局），但还是很多同学不敢使用，也不想尝试性使用。我想主要原因出于他的语法版本众多，浏览器对其兼容性等。 在《“老”的Flexbox和“新”的Flexbox》一文中，让我们了解了如何识别Flexbox的语法版本，而在《使用
【实习所遇问题-02】溢出内容一行显示,可滑动
Myself's 优快云
06-17 316
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
微信小程序 Flex布局-容器属性
weixin_45343878的博客
08-17 658
场景 容器与项目元素 主轴与交叉轴 容器属性 盒模型分类 盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式 场景 在小程序开发中，需要考虑各种尺寸终端设备上的适配。 在传统网页开发，用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现 比如下面常见的信息列表，要求内容高...
Flex布局-容器属性
weixin_45492145的博客
11-22 614
在了解Flex布局前我们先了解一下盒模型的分类 盒模型分类 盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式 场景 Flex布局的应用场景 场景： 在小程序开发中，需要考虑各种尺寸终端设备上的适配。 在传统网页开发，用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现 ...
margin-top: 20px; display: flex; justify-content: space-around;
最新发布
07-22
1. 旧版浏览器（如 IE11）需要前缀： ```css .container { display: -ms-flexbox; display: -webkit-flex; display: flex; } ``` 2. `gap` 属性在 Safari 14.1+ 才完全支持 3. 使用 PostCSS 自动添加前缀解决...
解决弹性布局中子元素内容溢出问题
凌峰的博客
08-25 2269
在移动端日常开发中经常会遇到这样一个场景，在一个列表中，左边是一张固定大小的图片，右边是一行或多行文字，宽度自适应，溢出省略，如下图
CSS flex布局 内容溢出
baby2008vox的博客
08-22 2389
flex布局中，容器（flex-container）内的项目（flex-item）内容过大，如 文字过长、图片过大等 ,会使容器（flex-container）变大，使布局错乱，不能达到设计效果，解决办法。这样容器（flex-container）就不会被动变大。溢出，想显示省略号…如果想忽略溢出内容，可以添加。
Css Flex弹性布局中的换行与溢出处理
qq_58626489的博客
02-04 3477
在Flex弹性布局中，元素的布局仅依赖于父容器的设置，而不再需要复杂的相对或绝对定位。2，使用flex属性：flex属性是flex-grow、flex-shrink和flex-basis的缩写。可以通过设置不同的flex-basis值来改变子元素的宽度，从而实现溢出内容的隐藏效果。在上述代码中，容器元素的宽度为400px，设置了flex-wrap属性为wrap，以及子元素的flex-basis属性为200px。在Flex布局中，当子元素的总宽度超过父容器的宽度时，有时我们需要进行换行处理。
Css Flex 弹性布局中的换行与溢出处理方法
风清扬的专栏
10-02 2万+
本文将详细介绍Flex布局中的换行与溢出处理方法，并结合具体的代码示例，帮助读者更好地理解与运用。2，使用flex属性：flex属性是flex-grow、flex-shrink和flex-basis的缩写。可以通过设置不同的flex-basis值来改变子元素的宽度，从而实现溢出内容的隐藏效果。在上述代码中，容器元素的宽度为400px，设置了flex-wrap属性为wrap，以及子元素的flex-basis属性为200px。在Flex布局中，当子元素的总宽度超过父容器的宽度时，有时我们需要进行换行处理。
探秘Flex布局下子元素宽度超出的那些烦心事
ljgllxyz的专栏
05-07 2108
嘿，小伙伴们！你们有没有遇到过用Flex布局的时候，子元素的宽度莫名其妙地超出了父元素的情况？别着急，今天我就来给大家揭秘这个问题的来龙去脉，以及一些解决方案。让我们一起来深入探讨！
【IE11】弹性布局flex:1失效
weifenhong的博客
07-14 3099
1. 方法一 flex-grow:1; 1. 方法二 flex:1 1 auto;
针对flex布局下文字溢出的解决方法
weixin_67321774的博客
09-30 3570
flex布局，文字溢出
flex布局不兼容ie怎么设置
热门推荐
岁月如歌去，十年弹指间
09-30 5万+
以下浏览器支持flex布局方式 IE10+、Edge、Firefox 2+、Chrome 4+、Safari 3.1+ 以下浏览器支持标准的flex布局方式（不需要加私有属性前缀） Edge、Firefox 28+、Chrome 29+、Safari 9+ 想要支持ie低版本 同时使用 display: flex; float: left; 例： div{ dis...
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; } ....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值