`

在table中tr的display:block在firefox下显示布局错乱问题

阅读更多

按照常理,对于某一单元行需要显示时,使用:display:block属性,不需要显示时使用display:none属性,而且这样做在IE浏览器中显示正常,没有任何问题。

但是当用Firefox浏览时却出现了布局错乱的问题,然后通FireBug去看了下源码,调试下了,发现是display:block属性搞的鬼。

1、当表格为多列的情况下,属性为"display:block"行的内容宽度仅与第一列宽度相同,也就是说无论你使colspan的属性值为多少,剩余列的空间都不进行解析。
2、同一行反复的在"display:none;"与"display:block;"两个状态间切换时,表格的底部会持续的产生多余的空白空间以至于造成页面布局的扭曲。

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


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/lhypang2006/archive/2009/12/07/4958042.aspx

分享到:
评论

相关推荐

    table中tr的display:block显示布局错乱问题

    table中tr的display:block显示布局错乱问题

    js style.display=block显示布局错乱问题的解决方法

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

    CSS属性display:inline-block用法深入理解

    本文向大家描述一下CSS属性display:inline-block的用法,在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性;可以将对象呈递为内联对象,但是对象的内容作为块对象呈递,旁边的内联对象会被呈递在...

    关于CSS中的display:table-cell使用技巧的几种应用

    目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用。 我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐...

    CSS display属性的table表格布局

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格的合并,即采用正行嵌套一个单独的...

    基于display:table的CSS布局让HTML元素和像table一样

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table、table-row和...使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如,“display:

    解决firefox下resize事件无效问题

    解决firefox下resize事件无效问题

    实现div垂直居中的display:table-cell方法示例介绍

    ie7和ie6都不能识别 display: table-cell;(但是支持display: block等css1的属性!) ie8以及以后版本可以识别! ie7和ie6能识别vertical-align:middle; 如果盒模型中间只有几段文字的话,设置line-height就可以...

    displayTable自由拖动列.zip

    综合了网上的一些拖动table列宽的方法我自己写了一个 这个是针对Display:table 这个...其实原理很简单我是在页面最后添加的js代码也就是在display:table生成了<table>之后所有稍作分析就可以应用在普通的table标签中

    深入解析CSS的display:inline-block属性的使用

    display:inline-block感觉与display:table-cell有些相似,例如对内部元素的包裹性。但是,由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与...

    HTML table行距的改变方法示例

    在使用HTML表的时候有时候需要我们改变行距,但是改变margin,padding,collapse等方法效果都不是很好。在这里我找到了一个实用的小...table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了

    c++中hash_table以及std::map应用案例

    代码重点是hash_table,附加std::map与其做对比,实现的是一条sql语句:select c_nationkey, c_mktsegment, count(*), max(c_acctbal) from aaa_customer_1g group by c_nationkey, c_mktsegment order by c_...

    jq 隐藏table中的tr或td

    在不知道table的ID的情况下。隐藏table里面的tr td

    分别显示/隐藏TABLE,TR,TD等经典代码

    分别显示/隐藏TABLE,TR,TD等经典代码,使用js控制。

    display:table-cell实现兼容性的两栏自适应布局实现代码

    display:table-cell实现兼容性的两栏自适应布局,需要的朋友可以参考下

    css之display属性之inline-block布局实现详解

    DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 ...

    js控制table的tr变色

    js控制table的tr变色,非常实用,可控想变色的行,也可得到table中的任意td的值。

    XHTML语言默认的CSS样式

    html,address,blockquote,body,dd,div,dl,dt,fieldset,form,frame,frameset,h1,h2,h3,h4,h5,h6,noframes,ol,p,ul,center,dir,hr,menu,pre { display:block} li { display:list-item} head { display:none} table { ...

    selenium + python 获取table数据的示例讲解

    根据table的id属性和table中的某一个元素定位其在table中的位置 table包括表头,位置坐标都是从1开始算 tableId:table的id属性 queryContent:需要确定位置的内容 def get_table_content(tableId,queryContent): ...

Global site tag (gtag.js) - Google Analytics