在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& ...
随机推荐
- 1. Two Sum (快速排序;有序数组的查找: 两个指针; 哈希表)
Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...
- ubuntu下手动安装php-amqp模块教程
用于ubuntu的默认源里面没有php5-amqp这个包,所以要用上amqp得考手动编译. 参考手册 http://php.net/manual/pl/book.amqp.php 首先安装必须的php ...
- 【git】gitignore
gitignore git专门有个文件用来管理那些不被纳入版本库的文件,这个文件是 [.gitignore],所有不被包含的都能放进去,但这个是有前提的. 前提 前提是文件如果没被git客户端trac ...
- HDU 1754 I Hate It(线段树区间查询,单点更新)
描述 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感.不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模拟老师的询问.当然,老 ...
- Python: packer方式加密js代码之解密函数
起源: 解析一网站时,发现其视频信息为一段js代码动态生成,而此段js代码,是用packer加密的. 其加密后的代码段如下: eval(function(p,a,c,k,e,d){e=function ...
- 管道分隔符Split
string[] areaID = area1Id.Split(new char[] { ',' });
- samrty模板变量操作符
count_sentences [计算句数],示例:{$smarty.get.name|count_sentences} count_words [计算词数],示例:{$smarty.get.name ...
- node.js中module模块的理解
node.js中使用CommonJS规范实现模块功能,一个单独的文件就是一个单独的模块.通过require方法实现模块间的依赖管理. 通过require加载模块,是同步操作. 加载流程如下: 1.找到 ...
- 9.14 h5日记
9.14 ❤知识补充 margin的问题:margin:0 auto:可以解决元素在网页的居中问题(记得设置宽度) 1.css层叠样式表的问题 CSS的两个性质 (1)继承性 (2)层叠性 ...
- IntelliJ idea 的破解
·1.破解的jar包下载链接: https://pan.baidu.com/s/1JV6GwguGQNs5pNQtst29Hw 提取码: u2jd 2.安装和破解地址:https://www.cnb ...