flex布局不兼容ie怎么设置

最新推荐文章于 2024-09-09 10:27:59 发布
原创 最新推荐文章于 2024-09-09 10:27:59 发布 · 5.5w 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在不同浏览器中使用Flex布局的支持情况，包括IE10+、Edge、Firefox及Chrome等，并介绍了一种兼容IE低版本的布局方案，即外层使用display:flex;，内层使用float:left;的方法，确保了跨浏览器的兼容性。

以下浏览器支持flex布局方式
IE10+、Edge、Firefox 2+、Chrome 4+、Safari 3.1+

以下浏览器支持标准的flex布局方式（不需要加私有属性前缀）
Edge、Firefox 28+、Chrome 29+、Safari 9+

 

想要支持ie低版本

同时使用

display: flex;
    float: left;

例： 

div{

display: flex;

    div{

      float: left;

    }

}

外布局flex，内布局float

 

岁月如歌_
关注
解决跨浏览器兼容性问题：CSS Flexbox布局在IE中的错位BUG
江拥羡橙的博客
09-26 314
在现代前端开发中，CSS Flexbox布局因其灵活性和易用性被广泛采用。然而，许多开发者会遇到一个常见BUG：Flexbox布局在旧版浏览器（如Internet Explorer 10-11）中表现不一致，导致元素错位或尺寸计算错误。本文将一步步分析问题原因，提供可靠解决方案，并附上可即查即用的代码示例。
Css3 via IE7 8 9
Ant Ren的专栏
01-23 2892
一直苦思一个问题：怎么样才能让新的Css3的特性在古老的IE浏览器上正常显示，乍一看有点强人所难，因为国外的许多优秀Html5网站都公开不支持IE浏览器了，然而在国内在很长一段时间无法割舍IE这个捣蛋的体验之毒瘤的。 最近在网上发现两个比较好的框架，至少能解决一部分问题： 1. PIE: http://css3pie.com/ 2. IE7/8/9.js: http://code.g
每次chrome提示flexpaper不兼容的问题，我是这么处理的。
weixin_30439131的博客
01-24 3480
每次公司的邮件连接点进去后，就发现了提示这个 Your browser is not compatible with FlexPaperUpgrade to a newer browser or download Adobe Flash Player 10 or higher.Click on the icon below to download the latest version of ...
ie浏览器中样式的问题以及解决方法
CheyBen的博客
01-06 1143
IE兼容性：IE9包括IE9不支持flex布局，也不支持动画样式keyframes 1、通过meta代码强制浏览器使用WebKit内核极速模式（解决 meta name="renderer" content="webkit" 不起作用） 2、设置双核浏览器的浏览模式<meta name=“renderer” content=“webkit|ie-comp|ie-stand”> 3...
[css]关于flex在IE11中不兼容问题
jameskaron的专栏
08-03 2300
在IE11中使用了display:flex下的子控件不能正确显示,删掉属性后可以显示,但是位置错乱. 在网上搜索了下,有各种各样的说法,但是都未能解决问题. 那索性不用flex吧,直接通过left/top/right这些来固定控件试试,我的控件本来的css: 效果是右上角置顶 .right_top_bar{ display: flex; flex-direction: row; position: absolute; right: 0; } 在我取消flex,发现
小心display:flex;这个属性，低版本的ie不支持，可能会显示不出来
weixin_34419321的博客
09-20 1258
2019独角兽企业重金招聘Python工程师标准>>> ...
解决flex布局不兼容ie问题
zuo_zuo_blog的博客
03-30 4602
以下浏览器支持flex布局方式 IE10+、Edge、Firefox 2+、Chrome 4+、Safari 3.1+ 以下浏览器支持标准的flex布局方式（不需要加私有属性前缀） Edge、Firefox 28+、Chrome 29+、Safari 9+ 想要支持ie低版本 同时使用，外布局flex，内布局float display: flex; float: left; div{ display: flex; div{ float: left; } }
flex布局兼容性问题小结
01-21
一.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 标志：...
上述代码中，flex布局不兼容ie，请换一种写法
06-08
如果要在IE浏览器上实现两个按钮水平布局，可以使用以下HTML和CSS代码： ```html <button>Button 1 <button>Button 2 ``` ```css .button-container { width: 100%; display: table; table-layout:...
Flex 布局教程
最新发布
m0_54829066的博客
09-09 1357
Flex 布局是一种强大而灵活的 CSS 布局方式，它可以帮助我们轻松实现复杂的页面布局和响应式设计。通过掌握 Flex 容器和项目的属性，以及合理地应用 Flex 布局的最佳实践，我们可以提高页面布局的效率和质量，为用户提供更好的浏览体验。同时，要注意 Flex 布局的兼容性问题，并采取相应的解决方案，以确保页面在不同浏览器中的正常显示。Flex 布局的定义与优势。保持代码的可读性和可维护性。Flex 布局的基本概念。合理使用 Flex 属性。
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 ...
flex 布局的浏览器兼容性方案
热门推荐
qq_32875037的博客
09-05 1万+
前言 flex 布局在目前前端开发中使用到的概率还是蛮大的，尽管它从诞生到现在已经经历了 N 年了，但是从个人的工作圈子来看，有很多人其实对 flex 布局的理解还是很表面，比如一味地使用 flex: 1 或者 flex: auto 等，导致一旦出现一些样式问题或者浏览器兼容问题，马上就无法处理了。因此，个人从 flex 布局基础知识和浏览器兼容性两个方面，结合个人工作经验，整理了一篇文章，希望对大家有帮助，如有阐述有误之处，还望不吝指教！文章大体分为两个部分，第一块是 flex 的基础知识，包括布局特性.
display:flex；兼容浏览器写法
weixin_44283589的博客
08-14 1206
需要注意的是，这只是一个示例，实际使用时可能还需要考虑其他兼容性问题，并根据具体情况进行调整。如果你需要更全面的兼容性解决方案，建议使用 CSS 预处理器（如 Sass 或 Less）或使用相关的 CSS 库（如 Autoprefixer）来自动处理兼容性问题。
html flex 兼容ie9,css---flex兼容性布局
weixin_35834271的博客
07-02 1352
flex布局分为旧版本dispaly: box;，过渡版本dispaly: flex box;，以及现在的标准版本display: flex;。所以不同版本浏览器肯定存在兼容问题。Android2.3 开始就支持旧版本 display:-webkit-box;4.4 开始支持标准版本 display: flex;IOS6.1 开始支持旧版本 display:-webkit-box;7.1 开始支持...
(全) flex布局兼容性 兼容新老浏览器、移动端浏览器
qq_39906719的博客
07-08 4332
大部分开发者使用flex布局基本上都遇到过兼容性的问题，尤其是移动端在适配低版本的时候，下面是我总结的flex 布局兼容性的css样式，希望能帮到大家。 /* 父元素-flex容器 */ .flex{ display: flex; display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-
flex布局兼容浏览器设置
weixin_39450432的博客
06-02 616
兼容写法： display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ / display: -moz-box; / Firefox 17- / display: -webkit-flex; / Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 / display: -moz-...
IE浏览器下flex布局的bug
ala27792的博客
10-11 1857
原文地址：gitub上的Flexbugslist，可以看到Flex布局在IE糟糕表现的详细描述。 2. Column flex items set toalign-items:centeroverflow their container flex 容器如果设置竖排，并且垂直居中，flex子项目的文字会溢出容器。解决办法是给子项目设置一个max-width:100%。Edge修...
【IE11】弹性布局flex:1失效
weifenhong的博客
07-14 3139
1. 方法一 flex-grow:1; 1. 方法二 flex:1 1 auto;
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值