解决display:flex在低版本chrome浏览器默认脱离文档流的bug

已于 2022-07-14 14:39:52 修改
阅读量2.1k 收藏
点赞数 1
分类专栏： 前端 文章标签： chrome flex javascript html bug
于 2020-09-02 09:46:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43521227/article/details/108356179
版权
本文探讨了不同布局技术的优缺点，包括使用display:-webkit-box、display:Grid和float浮动解决布局问题的方法，以及它们在兼容性和业务需求方面的表现。

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

1，使用display:-webkit-box解决

把display:flex改成display:-webkit-box解决问题

缺点：但子元素需要换行的时候，无法进行换行

2，使用display:Grid解决

grid-template-columns解决

3.使用float浮动解决

兼容性和满足业务，针对于兼容低版本浏览器，比较推荐使用。

华为meta30浏览器不兼容flex布局解决方案-加前缀
qq_42859450的博客
12-17 1008
解决之后的图片： .flex{ display: -webkit-box; display: -webkit-flex; /* OLD - iOS 6-, Safari 3.1-6 / display: -moz-box; / OLD - Firefox 19- (buggy but mostly works) / display: -ms-flexbox; / TWEENER - IE 10 / display: flex; } .flex1{ -webkit-box.
css Table布局-display:table
qq_35396397的博客
11-22 885
使用表格布局一直是一个敏感的主题。一般情况下，Web开发人员考虑基于表格布局是禁忌。 尽管反对的理由看起来证据很充分，但是大多数开发者除了谴责基于表格的布局，都无法提供完善的使用场景。 “表格不好。” 从早期反对HTML Table（<table>标签）开始这种势头就非常强劲。 几代开发者被成功洗脑，根深蒂固的认为：任何使用表格都是邪恶的。 诚然，我也是避免使用...
【css兼容】flex在低版本 chrome 浏览器的兼容问题
weixin_43841308的博客
12-16 5100
flex布局 在低版本chrome浏览器默认脱离文档流，父元素变更为浏览器，height：100%与预想效果不一致。
flex奇特bug
shanshan3312的专栏
12-09 472
1、格式化系统时间周几比当前多一天 比如当前周二，星期用EEEE时显示周三，星期用EEE时显示二，因此格式化字符串改为星期EEE：     var dateFormatter:DateFormatter = new DateFormatter();     dateFormatter.formatString = "YYYY年MM月DD日  星期EEE JJ:NN:SS";     va
解决浏览器不支持display:flex的问题
单调枯燥的CC的博客
06-11 5754
在本地测试的 display:flex;布局没问题，但是目标升级的浏览器的Chrome版本较低，不支持该布局。 查看控制台： 解决办法： 兼容各浏览器的写法 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+, Oper
position flex脱离文档流 使用after_前端学习随笔7 文档流与浮动
weixin_34162253的博客
01-24 884
注：测试浏览器版本号——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。一 心得体会今天的任务是掌握float(浮动)的应用，创建出三种不同布局的简历。再次学习的过程中，我发现了一些以前忽视甚至弄错的知识点，比如说使用float其实不能将该元素完全脱离文档流，其只是改变了文档流，在文档流中还能占据相应的位置；而使用absolut...
Html 文档流内及脱离文档流容器水平居中的方法
Dpl0216的博客
04-10 1188
Html 文档流内及脱离文档流容器居中的方法，分享了嵌套法、绝对定位配合transform的方法、以及flex布局居中三种方法。
【跨浏览器兼容性】：解决花店网页在不同浏览器中的显示问题
!... # 摘要 跨浏览器兼容性是前端开发中的核心问题之一，直接影响到网站的可访问性和...随后，文章深入介绍了一些实践技巧，如CSS和JavaScript兼容性问题的解决策略以及跨浏览器测试和调试方法。通过分析花店网页的兼容
前端常见浏览器兼容性问题解决方案
m0_67401545的博客
03-09 6689
前言： 不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎 所以浏览器兼容性问题一般指：css兼容、js兼容 浏览器 内核（渲染引擎） Chrome谷歌 之前Webkit，已改Blink内核 FireFox火狐 Gecko Safari苹果 Webkit IE Trident Opera欧朋 现已改用Google Chrome的Blink内核 一、css兼容 1. 不同浏览器的标签默认的margin和padding不同 问题症
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...
当移动端H5中的display:flex不生效时，给我整破防了
weixin_47389477的博客
08-23 709
在项目开发中遇到一个“更多”按钮放置于卡片的右下角时，在安卓9版本的浏览器打开项目，结果测试出来“更多”按钮样式错乱，做了这么久的开发，在移动端给我整破防了。情况紧急，于是更换成position:relative定位来实现，最后可以实现效果。现在想知道如何是什么原因造成的。display:flex布局，使用比较灵活，但是这个css特性是新的，老版本的浏览器不兼容，有时候使用就会失效。position的定位，一般来说就是子绝父相，在文档流中不占据位置，同时可以使用z-index来设置层级。
谷歌浏览器（Chrome）无法调试Flex程序
wujianyouhun的专栏
01-09 4407
1.问题描述 Flex无法调试的情况： 在调试Flex程序的时候，经常后遇到进度为57%无法调试的情况。对于Chrome浏览器，还会遇到 “Flash  Builder 找不到所需版本的 Abobe Flash Player 。。。。。。”等情况，甚至还会出现下图所示情况： 找不到 Abobe Flash Player ：C：\...\Chrome\Application
CSS 弹性布局
stanwuc的博客
01-10 382
弹性布局
Flex超精细讲解
weixin_71454352的博客
10-06 469
Flex超精细讲解
CSS Grid布局的使用
冰的博客
06-17 594
介绍之前，先了解一下该门技术的优缺点，看自己是否值得学习，优缺点如下：优点：CSS Grid布局是一种用于创建网页布局的强大工具。它引入了一个二维网格系统，可以以行和列的形式创建布局，提供了更灵活和精确的控制，并且减少了不必要的一些计算。缺点：兼容性问题：CSS Grid布局是在CSS3中引入的较新的特性，因此旧版本的浏览器可能不支持它或支持有限。
Flex布局与使用
llssdshiyi的博客
02-12 652
目标： 能够使用Flex布局模型灵活、快速的开发网页 Flex布局又称弹性布局，是浏览器提倡的布局，使得布局更加简单、灵活，还能避免浮动脱标问题。当容器高度不确定时，使用float浮动布局进行横向排列会导致脱离文档流，这时就可以使用flex布局。 重点概括： 添加弹性布局：display:flex; 主轴居中：justify-content: center; 主轴间距在子级之间：justify-content: space-between; 主轴所有地方的间距都相等：justify-cont
CSS旧版flex及兼容
weixin_30342827的博客
03-30 98
前面的话 　　flex弹性盒模型有3个版本: 旧版本、混合版本和新版本。如果要保证flex弹性盒模型在各个主流浏览器上表现一致，就必须掌握这3个版本的不同用法。深入理解CSS弹性盒模型flex已经详细介绍过其基本用法，本文主要介绍旧版本flex的不同之处及兼容写法 适用范围 　　旧版本flex是指最早的flex版本，该版本的flex应用在safari3.1-6(主要表现在windows...
Safari 和 Chrome 浏览器 CSS 兼容性问题与解决方案
最新发布
webzqr的博客
12-11 2343
在 Chrome 中，calc() 函数的计算结果默认遵循 content-box 盒模型，而在 Safari 中，calc() 的计算结果却会受到 box-sizing 设置的影响。如果没有显式设置 box-sizing: border-box，Safari 会按照 content-box 模式来计算。三、position: sticky 支持差异。一、Flexbox 布局兼容性问题。四、vh 和 vw 单位的兼容性。二、Grid 布局的兼容性问题。
浏览器兼容性问题的总结
fengGer的博客
03-12 379
不同浏览器的标签默认外补丁margin和内补丁padding不同 发生概率：100% 解决方案：使用CSS通配符*，设置内外补丁为0 *{ margin: 0; padding: 0;} 块属性标签float之后，又有横向的margin值，在IE6中显示会比设置的大（IE6双边距bug） 发生概率：90% 解决方案：在float标签样式控制中加入display:inline; 设置较小的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值