CSS flex 盒子在 Chrome 和 Safari 中的行为差异

文章出自个人博客 https://knightyun.github.io/2021/07/05/css-flex-chrome-safari-bug，转载请申明。

问题

最近的开发中有遇到一个页面样式的兼容性问题，大致是使用 flex 布局的两个嵌套弹性盒子，在 Chrome 和 Safari 中对一些特殊情况的处理行为不一致，从而产生了测试 bug；

复现

下面将问题简化为了一个 demo 模型，一个定高 300px 的 flex 盒子 A（红色边框），嵌套了另一个高度被子元素（绿色块）撑开的 flex 盒子 B（蓝色边框），其中盒子 B 为垂直伸缩 flex-direction: column;，Footer 元素（绿色边框）高度固定 100px，背景半透明；代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Demo</title><style>.flex-box-a {display: flex;width: 300px;height: 300px;flex-direction: column;border: 2px solid red;}.flex-box-b {display: flex;width: 200px;height: auto;border: 2px solid blue;}.inner-green-box {width: 100px;height: 100px;background: green;}.inner-aqua-box {width: 100px;height: 100px;background: aqua;}.footer-box {width: 200px;height: 100px;border: 2px solid lime;background: skyblue;opacity: .5;}.bottom-brown-box {width: 304px;height: 100px;color: white;background: burlywood;}</style></head><body>Flex Box A - height: 300px;<div class="flex-box-a">Flex Box B - height: auto;<div class="flex-box-b"><div class="inner-green-box">height: 100px;</div><div class="inner-aqua-box"></div></div><div class="footer-box">Footer - height: 100px;</div></div><div class="bottom-brown-box">height: 100px;</div></body>
</html>

效果：

然后增加绿色块子元素的高度，可以发现在 Chrome 中 flex 盒子 B 的高度会被该子元素撑开，Footer 元素高度被压缩，而 Safari 中的盒子 B 的高度并没有被子元素撑开，而是超出部分被隐藏在了 Footer 下层，同时 Footer 元素也被少量压缩：

当绿色块子元素高度超过最外层 flex 盒子 A 的高度时，Chrome 中的内层 flex 盒子 B 继续被撑开，Footer 元素直接脱离外层 flex 盒子，而 Safari 中只有子元素超出外层 flex 盒子，Footer 依然只被少量压缩：

解决

最终解决问题的方式是放开外层 flex 盒子 A 的高度限制，这样无论在 Chrome 还是 Safari 中 flex 盒子都能被自由撑开，行为表现一致：

因此开发中遇到类似定高与弹性并存的情况，需要合理设计布局，避免不必要的兼容问题；

CSS flex 盒子在 Chrome 和 Safari 中的行为差异相关推荐

chrome和safari_私人浏览器-如何在Chrome和Safari中使用隐身模式
chrome和safari Private browsing, or "incognito mode" has become a popular way to surf the w ...
html safari图片不显示,html - 某些FA图标显示在FF，Chrome和Safari中，但没有浏览器会全部显示它们 - 堆栈内存溢出...
我正在使用Pixelarity( https://pixelarity.com/ethereal )的模板,其中他们实现了超赞的v4字体. 由于我也想使用"品牌",因此我需要连接v ...
html+css基础仏学习教程之HTML 中播放声音或者视频的方法有很多种。
在 HTML 中播放声音或者视频的方法有很多种. HTML 音频问题,以及解决方法在 HTML 中播放音频并不容易! 您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中(Internet Exp ...
css3 flex 省略号,CSS：使用flexbox的中间省略号，在safari中的中断
我试图在使用flexbox而不是float的两段内容之间创建一个省略号.我需要的效果可能永远不会与浮动工作.CSS:使用flexbox的中间省略号,在safari中的中断第一个"列&quo ...
ionic android绝对定位,Safari中的CSS故障与Ionicons作为背景内容和绝对定位
我创建了我的第一个使用SASS(Compass)的网站,我非常喜欢它,它是一个非常方便的工具.我还添加了Font Awesome,并经常使用它,因为我想优化Retina desiplays,因此使用更 ...
input onblur事件在chrome/safari中失效
解决方案:chrome/safari中的input onblur事件要先调用focus()的.示例: <script type="text/javascript" src=& ...
css hack（ie6-9,firefox,chrome,opera,safari）
来源:http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.html 在这个浏览器百花争鸣的时代,作为前端开发的我们为了我们漂亮的设计能适 ...
CSS——弹性盒模型(Flex)
CSS--弹性盒模型前言本文大部分参考自阮一峰老师和B站后盾人的Flex布局教程. 原文地址:
面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...

CSS flex 盒子在 Chrome 和 Safari 中的行为差异

问题

复现

解决

CSS flex 盒子在 Chrome 和 Safari 中的行为差异相关推荐

最新文章

热门文章