对于某一单元行需要显示时,使用CSS display:block属性,不需要显示时使用display:none属性,在IE浏览器中显示正常,没有任何问题,但是当用Firefox浏览时却出现了布局错乱的问题,这是为什么呢?

本文向大家介绍一下如何解决CSS display:block在Firefox下显示布局错乱问题,按照常理,对于某一单元行需要显示时,使用CSS display:block属性,在IE浏览器中显示正常,但是当用Firefox浏览时却出现了布局错乱的问题,这里和大家分享一下解决方法。

CSS display:block在Firefox下显示布局错乱问题
按照常理,对于某一单元行需要显示时,使用CSS display:block属性,不需要显示时使用display:none属性,而且这样做在IE浏览器中显示正常,没有任何问题。
但是当用Firefox浏览时却出现了布局错乱的问题,然后通FireBug去看了下源码,调试下了,发现是CSS display:block属性搞的鬼。
1、当表格为多列的情况下,属性为"CSS display:block"行的内容宽度仅与第一列宽度相同,也就是说无论你使colspan的属性值为多少,剩余列的空间都不进行解析。
2、同一行反复的在"CSS display:none;"与"CSS display:block;"两个状态间切换时,表格的底部会持续的产生多余的空白空间以至于造成页面布局的扭曲。

解决方法
1、用CSS display:table-row属性来调试,发现者FireFox下正常了,但IE是不支持改属性的,怎么办呢?用JS来做判断,然后做兼容吧。
2、另外一个很简单也很可行的方法,就是用display:''这个属性dispaly后面不加任何的东西,很奇怪,这样就兼容了Firefox和IE了。

转载于:https://www.cnblogs.com/mrxiaohe/p/5201950.html

火狐表格错乱兼容性问题相关推荐

  1. el-table表格fixed=“right“后表格错乱;Safari浏览器el-table表格错乱;Safari浏览器样式需改无效;

    场景:el-table表格操作列右固定fixed="right",导致表格错乱.其实是由于某行的字体太多,所导致操作列高度错乱. 至于Safari浏览器样式修改无效的问题:每次修改 ...

  2. css兼容浏览器火狐,常见IE和火狐的CSS兼容性问题

    这里向大家介绍一下IE和火狐的CSS兼容性问题解决方法,在区别火狐和IE时最常用的是!important方法,对于区分其他不同浏览器和浏览器的不同版本的兼容性问题还有下面一些方法,比如:@import ...

  3. IE和火狐的css兼容性问题

    CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和Firefox存在很大的解析差异,这里介绍一下兼容要点. 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-lef ...

  4. (转)IE和火狐的css兼容性问题归总

    CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和火狐浏览器存在很大的解析差异,这里介绍一下兼容要点. 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, ...

  5. word中出现表格错乱 ,从别的文档里面复制过来的(或者自己建表格时)表格总是格式错乱

    解决办法:其实超级简单,你ctrl+v的时候看一下,有一个保留原格式,这个东西搞了我好久

  6. 关于vue ant design vue 与谷歌浏览器最新版table表格超出长度错位的问题

    ant vue 表格超出长度不会超出隐藏-省略,ellipsis不起作用 解决方案: .textEllipsis {overflow: hidden;text-overflow: ellipsis;d ...

  7. word vba 读出光标所在的列数_word高效技巧:这几个表格操作让工作更快速

    说到表格,都说Excel制表功能更强大.但是,表格在Word排版中的应用同样非常广泛.比如,在制作简历表.求职表和登记表等一些不规则且不需要做复杂统计分析.有大量文字的表格,我们都会用Word文档来制 ...

  8. ie 和火狐兼容问题

    原文链接:http://blog.csdn.net/kingyangtao/article/details/6058823 --------------(第一篇css的兼容问题)----------- ...

  9. IE浏览器和火狐浏览器兼容问题——CSS篇

    一.css+div 样式 IE与FF兼容问题汇总 CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和火狐浏览器存在很大的解析差异,这里介绍一下兼容要点. 1.DOCTYPE 影响 CSS 处理 ...

最新文章

  1. 半木下低风险交易-1
  2. 如何理解delegate (委托)设计模式
  3. ps抠头发插件_「福利」PS抠图神级插件——VertusFluid Mask
  4. 5.3 递归最小二乘法
  5. 复工之后,如何让自己的时间更值钱
  6. Keras---text.Tokenizer:文本与序列预处理
  7. JedisPool.getResource()方法卡死的解决办法
  8. mysql数据库不存在_mysql 数据库不存在
  9. c语言 word转pdf,超简单的Word转换成PDF技巧,可惜很多人还不会
  10. Reviewboard使用介绍
  11. 国产cpu芯片架构和指令集
  12. 笔记本安装Ubuntu9.04.图文并茂
  13. 三天打鱼两天晒网C++
  14. 新锐任务宝推广渠道推荐
  15. 电子学会2022年6月青少年软件编程(图形化)等级考试试卷(二级)答案解析
  16. php博客系统 加载评论,Yii实现单用户博客系统文章详情页插入评论表单的方法...
  17. 同时查询中通快运多个单号物流,并分析派件时效
  18. ThinkPHP,是为了简化企业级应用开发和敏捷WEB应用开发而诞生的开源轻量级PHP框架。
  19. shellcode教程从新手到高手
  20. 蚂蚁上市:P7可获1200万元期权,酸酸酸酸酸...

热门文章

  1. Vue warn Failed to mount component: template or render function not defined
  2. BundlePhobia
  3. 银盒子扫码下单在线订单开启商品售卖时段使用说明
  4. 飞鸽传书(IPMSG)协议(翻译稿)
  5. Test435678
  6. JavaEE 银联支付之网站支付-消费类交易
  7. VMware内存回收与分配机质
  8. 使用git如何批量对文件进行rm操作
  9. childNodes详解
  10. Linux出现NOKEY