fox浏览器兼容flexbox问题
来源:互联网 发布:梦幻群侠传3优化版 编辑:程序博客网 时间:2024/06/06 10:52
背景:在项自测过程中发现的问题,ffox浏览器在展开左侧数据树时,会把右侧数据区也拉伸开来,这是表象。
分析:
1.计算一下右侧数据区的clientHeight高度,是正确的,左侧元数据区域,会随着子组件内部树的拉伸越来越高,但clientHeight到一定值就不变了,和右侧相等。
2.经过自行计算发现,ffox在计算的时候,没有算上层的工具栏height。初始的时候,左侧右侧clientHeight相同,树的展开,左侧就忽略了工具栏的height,这太奇怪了。
3.针对奇怪的现象,需要最小化demo看下是什么原因,因此上面这些都是废话,看下面的内容。
Demo链接:https://jsfiddle.net/9817e2yv/5/ (不能访问的同学,自行翻墙操作)
问题描述:chrome滚动显示正确,在红色区域,在ffox环境,滚动条显示的是整体区域的,如何解决该问题?
chrome效果: ffox效果:
必备知识:需要熟悉了解Flex布局的有哪些属性,以及各自的作用(自行百度)
解决办法,经过大家的讨论,给出四种有效办法,各有优缺点:
1.https://jsfiddle.net/9817e2yv/6/ 增加一个具有高度的div撑开,占位。<div class="normal"></div>
2.https://jsfiddle.net/9817e2yv/7/ 使用绝对定位,让左侧脱离文档流,但需要右侧增加margin-left属性。
3.https://jsfiddle.net/9817e2yv/8/ 上种办法的优化,增加一个固定宽度的div占位,去除右侧的margin-left值,如果需要隐藏左侧,只要同时处理两个div就可以,不需要右侧变更。
4.https://jsfiddle.net/9817e2yv/12/ 结合overflow:hidden和flex 1 0 0 处理,控制外层的显示,形成BFC。如果内部需要显示,可以内部设置overflow:visible。
各有优缺点,结合项目实际情况取舍。
- fox浏览器兼容flexbox问题
- 混合Flexbox新旧语法兼容浏览器
- 使用Flexbox:新旧语法混用实现最佳浏览器兼容
- 现在实现flexbox 的策略和工具(flexbox兼容到IE8的跨浏览器解决方案)
- css兼容浏览器问题
- CSS兼容浏览器问题
- 浏览器兼容相关问题
- css兼容浏览器问题
- flexbox功能、兼容、原理
- flexbox全兼容模板
- ie6-ie7-fox 兼容
- 浏览器兼容锚点问题(兼容google)
- css浏览器兼容的问题
- CSS 浏览器兼容型问题
- 浏览器兼容,样式居中问题
- ajax浏览器兼容的问题
- 浏览器兼容。js部分问题
- IE浏览器兼容jsp问题
- 我的电路实践
- HHUOJ_1322: 挂盐水
- http 和https
- MVC(javaBean,JSP,Servlet)与MySQL结合例子
- python 基础之字典
- fox浏览器兼容flexbox问题
- 在List<string>的集合中,寻找包含某字符串的数据
- freemarker内建函数
- spring框架学习之路(二)-进阶技能(2)-邮件发送
- GitHub、oschina账号SSH Key配置
- freemarker自定义函数、指令
- Python基础之抽象
- 图书管理员
- Mesos集群:2个Linux agent和1个Windows agent