在table中tr的display:block在firefox下显示布局错乱问题
【转自:】 http://blog.csdn.net/sd2131512/article/details/4720345
按照常理,对于某一单元行需要显示时,使用: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了。
在table中tr的display:block在firefox下显示布局错乱问题的更多相关文章
- table中tr的display属性在火狐中显示不正常,IE中显示正常
最近在作项目的时候碰到一个问题,就是需要AJAX来交互显示<tr> </tr> 标签内的东西,按照常理,对于某一单元行需要显示时,使用:display:block属性,不需要显 ...
- ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法
ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...
- table中tr使用toggle不好,选择换一张方式
好几次遇到的问题,都是table中tr后面有一部分内容要显示,也是用tr装的,但是需要点击该行,后面那个tr才显示出来.不过最好不要用toggle去写,因为着实效果不佳.故而建议换一种方式,也许最简单 ...
- 如何改变vim中的光标形状 : 在插入状态下显示为 beam?而在 其他 状态下 为 block?
分成两种情况来说明: 如果是在 shell 即: gnome-termial终端中, 来启动或 使用 vim的话, 你是 无法 实现这种需求的: 改变vim中的光标形状 : 在插入状态下显示为 bea ...
- 对table的tr使用display:block显示colspan失效问题的解决
qqqq <table> <tr> <td id="qqq" colspan="3" style="display:no ...
- 有关table布局时tr 属性display:block显示布局错乱
display:block display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的; display:table-row tab ...
- table中tr间距的设定table合并单元格 colspan(跨列)和rowspan(跨行)
table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...
- js的传值,table中tr的遍历,js中动态创建数组
1.这里关键是对页面中的传值,其次是动态的创建一个数组,用来存值 $(val).css("background-color", "rgb(251, 248, 233)&q ...
- javascript闭包获取table中tr的索引 分类: JavaScript 2015-05-04 15:10 793人阅读 评论(0) 收藏
使用javascript闭包获取table标签中tr的索引 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
随机推荐
- turret
turret - 必应词典 美['tʌrət]英['tʌrɪt] n.角楼:(战舰.飞机或坦克的)炮塔 网络塔楼:转塔:转台
- ES6之导入模块时的内存共享
项目结构 主页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...
- RxJS之组合操作符 ( Angular环境 )
一 merge操作符 把多个 Observables 的值混合到一个 Observable 中 import { Component, OnInit } from '@angular/core'; i ...
- c中堆栈的理解
一直对堆栈的使用以及全局变量.静态全局变量.局部变量.静态局部变量.初始化的全局变量.未初始化的全局变量.初始化的局部变量.未初始化的局部变量理解的不是很清楚,今天抽个时间来总结以下这方面的知识: 1 ...
- 微信小程序开发——模板中加载html代码
最新方法可以使用微信小程序提供的 rich-text (富文本)组件直接写解析html,详见 rich-text: <rich-text class='f13 c_9' nodes=" ...
- swift - VC添加手势返回
1.需要添加手势的界面 (1)addBackGesture() (2) 设置手势返回代理 // MARK: - 添加返回手势 extension JYRTSShopDetialConteoller:U ...
- Extract Dataset
FROM <SAP PROGRAM DESIGN> Extract Datasets简称为Extract,是SAP中除了内表之外的另一种大量内存数据处理方式,允许用户动态地存储并排序结构化 ...
- Mysql的随机抽取
方法一 SELECT * FROM SHARE ORDER BY RAND( ) LIMIT 1; 在MYSQL的官方手册,里面针对RAND()的提示大概意思就是,在ORDER BY从句里面不能使用R ...
- div指令和mul指令
div是除法指令,使用div做除法时需要注意: 1)除数:有8位和16位两种,在一个寄存器或者内存单元中 2)被除数:默认存放在AX或DX和AX中.如果除数为8位,被除数则为16位,默认在AX中存放: ...
- BCH/BCHABC/BCHSV分叉后重放机制小结
1. 不过,在谈重放保护之前,我们需要先了解一下重放攻击(又称重播攻击.回放攻击).实际上,重放攻击在互联网行业里就有过出现,也是计算机世界黑客最常用的攻击方式之一,它是指攻击者发送一个目的主机已接收 ...