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

最新推荐文章于 2023-03-30 10:24:07 发布
原创 最新推荐文章于 2023-03-30 10:24:07 发布 · 2.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在IE11浏览器中使用Flex布局时遇到的内容溢出问题及解决方法。通过对比Chrome、Firefox等浏览器的表现，发现IE11对于flex属性的默认处理不同，需要额外设置flex-basis:auto来实现正确的响应式布局。

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

解决跨浏览器兼容性问题：CSS Flexbox布局在IE中的错位BUG
江拥羡橙的博客
09-26 285
在现代前端开发中，CSS Flexbox布局因其灵活性和易用性被广泛采用。然而，许多开发者会遇到一个常见BUG：Flexbox布局在旧版浏览器（如Internet Explorer 10-11）中表现不一致，导致元素错位或尺寸计算错误。本文将一步步分析问题原因，提供可靠解决方案，并附上可即查即用的代码示例。
微信小程序（Flex布局---容器属性）
weixin_45343973的博客
08-17 792
容器与项目元素 日常开发中，采用Flex布局的元素，一般简称为“元素”。 容器内的元素简称为“项目”或“元素”。 例： 主轴与交叉轴 在介绍各个属性之前，需要先明确一个坐标轴。 水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis）。 容器与项目元素 布局属性： 容器属性： flex-flow、flex-direction、flex-wrap、justify-con...
使用flex布局时宽度auto的元素内容溢出
Liu
03-30 325
当flex布局的item元素设置为自适应宽度，但是他的实际宽度较大时就会溢出父元素，如下。
flex内容溢出
Y_G_G的博客
09-04 2327
参考资料： 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
修复IE下相对定位子元素溢出Bug
歪脖先生的博客
02-26 732
相对定位子元素溢出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 964
经过这一系列对Flexbox的介绍，我想大家对Flexbox在布局中的使用以及其强大功能特性给我们布局带来的方便性都有所了解。话又说回来，虽然Flexbox功能强大（特别是弹性布局），但还是很多同学不敢使用，也不想尝试性使用。我想主要原因出于他的语法版本众多，浏览器对其兼容性等。 在《“老”的Flexbox和“新”的Flexbox》一文中，让我们了解了如何识别Flexbox的语法版本，而在《使用
flex-start flex-end stretch baseline
05-03
之前用户已经询问过关于flex-start和flex-end在微信小程序中的表现，现在扩展到更多的对齐属性，并且可能希望得到更全面的解释。 首先，我需要确认用户的需求。他们可能正在学习Flexbox布局，特别是在不同的对齐...
display flex 中使用flex-wrap: wrap; 想让模块间距保持一致
最新发布
09-02
但请注意，gap属性在旧浏览器中可能不被支持（如IE11完全不支持，但现代浏览器都支持）。 如果考虑到兼容性，我们可以使用margin来控制间距，但需要处理边缘情况（比如容器边缘的margin和换行时的行间距）。 ...
【实习所遇问题-02】溢出内容一行显示,可滑动
Myself's 优快云
06-17 332
<!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
IE浏览器下flex布局的bug
ala27792的博客
10-11 1850
原文地址：gitub上的Flexbugslist，可以看到Flex布局在IE糟糕表现的详细描述。 2. Column flex items set toalign-items:centeroverflow their container flex 容器如果设置竖排，并且垂直居中，flex子项目的文字会溢出容器。解决办法是给子项目设置一个max-width:100%。Edge修...
解决弹性布局中子元素内容溢出问题
凌峰的博客
08-25 2319
在移动端日常开发中经常会遇到这样一个场景，在一个列表中，左边是一张固定大小的图片，右边是一行或多行文字，宽度自适应，溢出省略，如下图
【IE11】弹性布局flex:1失效
weifenhong的博客
07-14 3133
1. 方法一 flex-grow:1; 1. 方法二 flex:1 1 auto;
IE11中flex布局兼容问题总结
meimeib的博客
07-27 3045
flex:1解析问题 原因： //在谷歌中flex:1;会解析为 flex-grow:1; flex-shrink:1; flex-basis:0%; //在IE中被解析为 flex-grow:1; flex-shrink:1; flex-basis:0px; 解决：将flex:1; 更改为flex: 1 1 auto; 父容器中flex-direction:column 和 align-items:center，这俩属性同时存在， 子容器内容过多会溢出容器 原因： IE中flex-shrink 的默认值
[css]关于flex在IE11中不兼容问题
jameskaron的专栏
08-03 2295
在IE11中使用了display:flex下的子控件不能正确显示,删掉属性后可以显示,但是位置错乱. 在网上搜索了下,有各种各样的说法,但是都未能解决问题. 那索性不用flex吧,直接通过left/top/right这些来固定控件试试,我的控件本来的css: 效果是右上角置顶 .right_top_bar{ display: flex; flex-direction: row; position: absolute; right: 0; } 在我取消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布局下文字溢出的解决方法
weixin_67321774的博客
09-30 3671
flex布局，文字溢出
flex子元素溢出
dearMengJJ的博客
07-01 4890
<view style="display:flex; flex-wrap:nowrap;width: 200px;"> <view style="width: 100px; height: 100px; background: #f00;"></view> <view style="flex:1; height: 100px...
CSS之flex兼容
热门推荐
为了而努力
09-22 5万+
随着自己写过的页面的增多，也遇到了很多CSS兼容性的问题。这些兼容性问题，都是必然的，因为技术在不断进步，不断革新，所谓，“后浪推前浪，前浪拍死在沙滩上”，当然我们的技术不能是被拍死在沙滩上，我们还要支持，不支持的话，只能是你这个页面，这个产品被淘汰。 那么为了不被淘汰，我们就要做些兼容性处理。 我写页面的时候用到过很多的flex布局，觉得非常好用。下面附上一篇不错的flex布局介绍的文章。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值