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

最新推荐文章于 2023-03-30 10:24:07 发布
最新推荐文章于 2023-03-30 10:24:07 发布
阅读量2k 收藏 2
点赞数
分类专栏： CSS布局 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fimooo/article/details/88812795
版权

今天在调页面的自适应，将页面的骨架用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的各浏览器兼容设置

Fimooo
关注
专栏目录
flex内容溢出
Y_G_G的博客
09-04 2174
参考资料： 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_44564157的博客
10-08 2281
flex 简介 为元素设置display: flex或者 display: inline-flex 该元素即成为伸缩容器（flex container）， 设置为flex ，该元素会独占一行 设置为 inline-flex，可以与其他 inline 元素在同一行。 此时伸缩容器的子元素自动升级为伸缩项目（flex item），伸缩项目的的特点如下， 伸缩项目默认在一行排列。 自动升级为块元素。 所有伸缩项目默认在主轴的 start 处排列。 伸缩项目也可以再次设置为flex，即flex可以互相嵌套。
使用flex布局时宽度auto的元素内容溢出
最新发布
Liu
03-30 230
当flex布局的item元素设置为自适应宽度，但是他的实际宽度较大时就会溢出父元素，如下。
修复IE下相对定位子元素溢出Bug
歪脖先生的博客
02-26 580
相对定位子元素溢出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 895
经过这一系列对Flexbox的介绍，我想大家对Flexbox在布局中的使用以及其强大功能特性给我们布局带来的方便性都有所了解。话又说回来，虽然Flexbox功能强大（特别是弹性布局），但还是很多同学不敢使用，也不想尝试性使用。我想主要原因出于他的语法版本众多，浏览器对其兼容性等。 在《“老”的Flexbox和“新”的Flexbox》一文中，让我们了解了如何识别Flexbox的语法版本，而在《使用
解决弹性布局中子元素内容溢出问题
凌峰的博客
08-25 2135
在移动端日常开发中经常会遇到这样一个场景，在一个列表中，左边是一张固定大小的图片，右边是一行或多行文字，宽度自适应，溢出省略，如下图
【实习所遇问题-02】溢出内容一行显示,可滑动
Myself's CSDN
06-17 287
<!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_45343973的博客
08-17 731
容器与项目元素 日常开发中，采用Flex布局的元素，一般简称为“元素”。 容器内的元素简称为“项目”或“元素”。 例： 主轴与交叉轴 在介绍各个属性之前，需要先明确一个坐标轴。 水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis）。 容器与项目元素 布局属性： 容器属性： flex-flow、flex-direction、flex-wrap、justify-con...
解析flex属性：flex：1究竟是什么
weixin_43554584的博客
02-17 4万+
成功搞懂了flex:1呢！
微信小程序 Flex布局-容器属性
weixin_45343878的博客
08-17 609
场景 容器与项目元素 主轴与交叉轴 容器属性 盒模型分类 盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式 场景 在小程序开发中，需要考虑各种尺寸终端设备上的适配。 在传统网页开发，用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现 比如下面常见的信息列表，要求内容高...
IE浏览器下flex布局的bug
ala27792的博客
10-11 1763
原文地址：gitub上的Flexbugslist，可以看到Flex布局在IE糟糕表现的详细描述。 2. Column flex items set toalign-items:centeroverflow their container flex 容器如果设置竖排，并且垂直居中，flex子项目的文字会溢出容器。解决办法是给子项目设置一个max-width:100%。Edge修...
针对flex布局下文字溢出的解决方法
weixin_67321774的博客
09-30 3314
flex布局，文字溢出
flex子元素溢出
dearMengJJ的博客
07-01 4808
<view style="display:flex; flex-wrap:nowrap;width: 200px;"> <view style="width: 100px; height: 100px; background: #f00;"></view> <view style="flex:1; height: 100px...
flex弹性盒布局在ie浏览器中的那些兼容性问题
学思QAQ的博客
01-13 2730
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无法保持宽高比缩放 ...
【web】flex布局浏览器兼容处理
dd的博客
03-24 2万+
一.W3C各个版本的flex 2009 version 标志：display: box; or a property that is box-{*} (eg. box-pack) 2011 version 标志：display: flexbox; or the flex() function or flex-pack property 2012 version 标志：dis
CSS之flex兼容
热门推荐
为了而努力
09-22 5万+
随着自己写过的页面的增多，也遇到了很多CSS兼容性的问题。这些兼容性问题，都是必然的，因为技术在不断进步，不断革新，所谓，“后浪推前浪，前浪拍死在沙滩上”，当然我们的技术不能是被拍死在沙滩上，我们还要支持，不支持的话，只能是你这个页面，这个产品被淘汰。 那么为了不被淘汰，我们就要做些兼容性处理。 我写页面的时候用到过很多的flex布局，觉得非常好用。下面附上一篇不错的flex布局介绍的文章。
【ie浏览器的兼容】css flex布局兼容ie10, ie11, 问题吐血总结，菜鸟必看
qq_17335549的博客
05-11 3658
flex布局中的flex-shrink
Flex布局在IE中的兼容性问题总结
scry丶坏坏的博客
05-22 4900
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
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值