手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS display:block在Firefox下显示布局错乱问题
CSS display:block在Firefox下显示布局错乱问题
摘要:对于某一单元行需要显示时,使用CSSdisplay:block属性,不需要显示时使用display:none属性,在IE浏览器中显示正常,没...

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

【CSS display:block在Firefox下显示布局错乱问题】相关文章:

CSS在IE和Firefox兼容要点分析

DIV背景图片在Firefox下不显示通过overflow:auto可解决

在CSS中用attr()显示HTML属性值

CSS在IE与Firefox下的兼容性

css布局中的居中问题

修复网页在IE8下的显示兼容问题

CSS布局入门

CSS里display的使用方法

Div+CSS布局入门

CSS网页布局li上多出的margin问题

精品推荐
分类导航