火狐浏览器中的flex－box与position冲突的解决

最新推荐文章于 2024-01-18 15:50:18 发布
最新推荐文章于 2024-01-18 15:50:18 发布
阅读量3.5k 收藏
点赞数
分类专栏： CSS和HTML的知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shirley_Ying/article/details/52241273
版权 
最近做了一个公司的分享页面，上面的导航栏，是采用flex-box和position的绝对定位，进行实现的，在chrome和safair中的实现的都是好的，本来以为万事大吉，就只差发布的时候，却出现呀，老大兴冲冲的拿来火狐浏览器的，妹子当时就泪崩了，我天，竟然冲突了。
然后妹子就火急火燎进行上网百度呀谷歌呀，最终发现了问题的所在，原因是因为
Ted_Rong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Flex布局与position布局 存在的冲突问题
weixin_60146725的博客
10-30 813
之前在写页面的时候遇到了一个小问题 在定义一个无序列表 首先使用了flex 使它默认主轴为水平方向 随后使用position定位到自己所需位置 这些都正常显示效果没有问题 效果如下 然后在设置主轴方向之间的排序 就显示不出来该效果 此时显示的与没有设置前一样 然后自己就试了下 就发现了解决办法： 可以给ul设置一个宽度： 此时就正常显示了 得到了想要的效果： ...
关于css中的position在各大浏览器（IE,FireFox,Opera）中表现问题
weixin_34197488的博客
10-05 333
关于css中的position在各大浏览器（IE,FireFox,Opera）中表现问题： 第一种情况： 1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition...
火狐浏览器初始化时 position定位失效问题解决
最新发布
qq_56538005的博客
01-18 408
后面突发奇想看看是不是因为是inline-block 的原因导致的 然后将其修改为了block,还真解决了。今天测试突然给我提了个bug，在火狐浏览器上选择器的icon错位了，其他浏览器没问题具体样式如下。感觉是个奇怪的问题，以此记录，具体原因我也懒得纠结了。查看具体代码的时候百思不得其解网上也找不到原因。
火狐浏览器不支持<th>绝对定位
aiwugang8319的博客
08-11 513
场景：公司老项目页面中有table布局，jquery-validate校验输入框失败时的提示信息，火狐浏览器不能在输入框后正确显示，然而IE和谷歌正常。 问题原因：火狐浏览器自身Bug,不支持table的相关标签用于绝对定位，火狐浏览器会找第一个不是table的父元素position为relative的定位。 解决办法：把table改div布局。 转载于:https://www.c...
解决IE与火狐浏览器padding-top差2px问题
09-25
padding-top差2px问题想必大家也有遇到过吧；比如 在火狐上padding-top:8px刚好而在IE上需要10px，具体的解决方法如下，希望对大家有所帮助
火狐浏览器hackbar2.1.3-master（火狐最新版亲测可用）
12-31
火狐浏览器Hackbar 2.1.3是一个强大的开发者工具，专为Firefox用户设计，用于在Web开发和安全测试过程中增强浏览器的功能。这个版本被证实与火狐的最新版本兼容，意味着用户可以在进行网页调试、渗透测试或者进行...
Firefox火狐浏览器官方51.0-win32版本exe安装包
12-24
《Firefox火狐浏览器51.0-win32版本：深入解析与使用指南》 Firefox火狐浏览器，由Mozilla基金会开发，是一款全球广受欢迎的开源网络浏览器。本文将围绕"Firefox火狐浏览器官方51.0-win32版本exe安装包"进行详细...
Firefox火狐浏览器官方52.0.1-win32版本exe安装包
12-24
《Firefox火狐浏览器52.0.1-win32版本：深入解析与使用指南》 Firefox火狐浏览器，由Mozilla基金会开发，是一款全球知名的开源网络浏览器。本文将围绕"Firefox火狐浏览器官方52.0.1-win32版本exe安装包"进行详细...
Firefox火狐浏览器官方84.0-mac版本dmg安装包
12-30
资源全名：Firefox 84.0.dmg
最后一个支持flex调试的Firefox的版本
03-01
最后一个支持flex调试的Firefox的版本，使用eclipse调试时高于此版本的Firefox会连接不上
flex与fixed定位的冲突解决
pspxuan的博客
09-17 4303
今日开发过程小程序项目使用了flex布局以及fixed。 同时使用时发现两者会有冲突， 例：上下各一个盒子， 上盒子： flex（父元素） 下盒子： fixed 下盒子为scroll列表。 当下盒子发生滚动时，下盒子会将上盒子顶出屏幕外面 解决方案： 将下盒子套一个外层盒子，外层定宽高，overflow：scroll（此方法会有问题） 设置上下盒子的z-index值，将下层盒子z-index &...
flex布局_flex布局的 flex（felx-grow、flex-shrink、flex-basis）详解
weixin_39948309的博客
11-21 382
flex布局中的flex-grow,flex-shrink,flex-basis接上篇文章，1. flex-grow属性 flex-grow定义剩余空间的分成。默认为0，即如果存在剩余空间，也不放大。如何理解这里的剩余空间呢，用例子来说明吧。默认的情况(flex-grow:0)在浏览器下是将flex-grow:1 时是:此时我们将例子变一下浏览器就是通过上面的动手,我自己总结出flex-grow会...
css 中的position定位和flex布局分析
热门推荐
我弟是个程序员
06-14 3万+
position定位 fixed绝对定位 fixed 生成绝对定位的元素，相对于浏览器窗口（或手机等终端窗口）进行定位。元素的位置通过&amp;amp;amp;amp;amp;amp;quot;left&amp;amp;amp;amp;amp;amp;quot;, &amp;amp;amp;amp;amp;amp;quot;top&amp;amp;amp;amp;amp;amp;quot;, &amp;amp;amp;amp;amp;amp;quot;rig
火狐浏览器弹性布局没有开启的问题
梦幻般的菜鸟的博客
03-21 1214
开启弹性布局的兼容写法    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    display: -moz-box;but在火狐浏览器里面   display: -moz-box覆盖了display: flex方法, 然后display: -moz-box在火狐...
flex和position兼容采坑笔记
qq_38109594的博客
08-25 1280
今天有空写了一个自己主页的网站，浏览器兼容（主要ie 9以上和chrome），有一个以前的问题也是很常见的问题，既然遇见了，索性就记录下来。直接看问题吧 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> ...
display: flex与position:absolute，IOS个别机型样式不兼容
weixin_42602504的博客
08-21 1163
在小程序页面中父元素使用display:flex时，子元素使用position:absolute后。在苹果6s/6P/6sP的系统下会出现兼容问题，子元素position:absolute不生效页面出现布局混乱。所以当子元素要用position:absolute，父元素不能使用 display: flex布局。否则会出现兼容问题（开发工具测不出问题，真机会在6s/6P/6sP才能测出问题） ...
火狐浏览器box-shadow兼容器问题
09-16
火狐浏览器在box-shadow兼容性方面存在一些问题...通过添加`-moz-box-shadow`前缀，可以确保在火狐浏览器上正确显示box-shadow效果。同时，为了兼容其他浏览器，建议在添加了前缀的同时也使用标准的`box-shadow`属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值