火狐表格错乱兼容性问题

对于某一单元行需要显示时,使用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了。

时间: 2024-10-12 21:43:12

火狐表格错乱兼容性问题的相关文章

IE和火狐的css兼容性问题

CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和Firefox存在很大的解析差异,这里介绍一下兼容要点. 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 h

element ui的表格列设置fixed后做动态表格出现表格错乱

最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机数Math.random(),每次表头设置完都要更新一下就正常,如下 这样,显示结果就正常了 原文地址:https://www.cnblogs.com/lwming/p/12074579.html

IE和firefox火狐在JS、css兼容区别

1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了.如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替. 2.禁止选取网页内容: 在IE中一般用js:obj.onselectstart=function(){return false;} 而firefox用CSS:-moz-user-select:none

【总结】IE和Firefox的Javascript兼容性总结

1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了.如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替. 2.禁止选取网页内容: 在IE中一般用js:obj.onselectstart=function(){return false;} 而firefox用CSS:-moz-user-select:none

数据库 day60,61 Oracle入门,单行函数,多表查询,子查询,事物处理,约束,rownum分页,视图,序列,索引

1.    oracle介绍 ORACLE数据库系统是美国ORACLE公司(甲骨文)提供的以分布式数据库为核心的一组软件产品,是目前最流行的客户/服务器(CLIENT/SERVER)或B/S体系结构的数据库之一.比如SilverStream就是基于数据库的一种中间件.ORACLE数据库是目前世界上使用最为广泛的数据库管理系统,作为一个通用的数据库系统,它具有完整的数据管理功能:作为一个关系数据库,它是一个完备关系的产品:作为分布式数据库它实现了分布式处理功能.但它的所有知识,只要在一种机型上学习

css基本设置

css引入方式: 头部引入:在HTML页面头部编写程序(一般用在访问量大的网页上) 标签内引入:在标签内直接写样式(优先级最高,但难于维护,会沉积大量代码) 外部引入:用link标签引入(常用 ,维护成本低,易改版) 字体属性设置:font-family:“宋体”:(可设多个字体,浏览器会逐个匹配直到匹配合适字体)浏览器是从客户电脑上匹配电脑上的字体. 字体风格设置:font-style:normal(正常)italic(斜体): 字体是否加粗:font-weight:bold(加粗)norma

《C++程序设计》的要点记录

20170723修改:Markdown对代码和表格的兼容性不好,改成TinyMCE编辑的格式了,这样看起来没那么别扭了! 前言 第一次写博客,也是第一次用markdown写博客,觉得会比较有意思吧!能够长期坚持写博客应该是个很优秀的习惯,作为小白,希望自己能够踏踏实实一步一个脚印的记录自己所学的东西.第一篇写的是谭克强老师的<C++程序设计>的读书笔记,主要记录该书中的一些知识点,由于该书将的内容比较局限和浅显,但是还是适合我这个非专业编程人员看,算给自己入个门和打个C++基础,下一步就好好啃

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法(非原创)

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 wi

css中的背景色渐变以及背景图的定位

单纯的背景色渐变: background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fff), color-stop(1, #ddd)); background: linear-gradient(to bottom, #fff 0px, #ddd 100%) repeat scroll 0% 0%; 可以同时支持谷歌.火狐浏览器,兼容性比较强. 背景图的位置: background:url("images/taocan-bg.pn