【转自:】 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下显示布局错乱问题的更多相关文章

  1. table中tr的display属性在火狐中显示不正常,IE中显示正常

    最近在作项目的时候碰到一个问题,就是需要AJAX来交互显示<tr> </tr> 标签内的东西,按照常理,对于某一单元行需要显示时,使用:display:block属性,不需要显 ...

  2. ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法

    ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...

  3. table中tr使用toggle不好,选择换一张方式

    好几次遇到的问题,都是table中tr后面有一部分内容要显示,也是用tr装的,但是需要点击该行,后面那个tr才显示出来.不过最好不要用toggle去写,因为着实效果不佳.故而建议换一种方式,也许最简单 ...

  4. 如何改变vim中的光标形状 : 在插入状态下显示为 beam?而在 其他 状态下 为 block?

    分成两种情况来说明: 如果是在 shell 即: gnome-termial终端中, 来启动或 使用 vim的话, 你是 无法 实现这种需求的: 改变vim中的光标形状 : 在插入状态下显示为 bea ...

  5. 对table的tr使用display:block显示colspan失效问题的解决

    qqqq <table> <tr> <td id="qqq" colspan="3" style="display:no ...

  6. 有关table布局时tr 属性display:block显示布局错乱

    display:block display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的; display:table-row tab ...

  7. table中tr间距的设定table合并单元格 colspan(跨列)和rowspan(跨行)

    table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...

  8. js的传值,table中tr的遍历,js中动态创建数组

    1.这里关键是对页面中的传值,其次是动态的创建一个数组,用来存值 $(val).css("background-color", "rgb(251, 248, 233)&q ...

  9. 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. 微信小程序开发——全局配置详细介绍

    本文针对官方文档未说明清楚的进行详细探索研究,官方文档详见:全局配置 . pages: 删除页面,需要先删除app.json中pages对应页面的路径,再去删除页面相关的所有文件,不然会出现页面文件混 ...

  2. maven 打 fat包(jar包有了全部依赖)插件

    <plugin> <artifactId> maven-assembly-plugin </artifactId> <configuration> &l ...

  3. Python: 浅淡Python中的属性(property)

    起源:项目过程中需要研究youtube_dl这个开源组件,翻阅其中对类的使用,对比c#及Delphi中实现,感觉Python属性机制挺有意思.区别与高级编程语言之单一入口,在类之属性这一方面,它随意的 ...

  4. 【校招面试 之 C/C++】第32题 C++ 11新特性(三)之for关键字

    1.for循环的一般写法: int arr[10] = { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }; for (int i = 0; i < 10; i++) cout ...

  5. swift - 使用系统app导航

    import UIKit //1.导入框架 import MapKit class ViewController: UIViewController { lazy var geoCoder : CLG ...

  6. Python爬虫项目--爬取某宝男装信息

    本次爬取用到的知识点有: 1. selenium 2. pymysql 3  pyquery 正文 1. 分析目标网站 1. 打开某宝首页, 输入"男装"后点击"搜索&q ...

  7. ret和retf

    ret指令用栈中的数据,修改IP的内容,从而实现近转移; retf指令用栈中的数据,修改CS和IP的内容,从而实现远转移. CPU执行ret指令时,进行下面两步操作: (IP) = ((ss)*16+ ...

  8. 动态规划:压缩编码;WirelessRouters;

    转载请注明~ 如果有理解不到位或错误的情况,劳烦大神指正,一定感激不尽! 题目来源:CCF201612-4 压缩编码 题目的意思是: 1. 顺序给定文字中n个单词出现的频率(次数): 2. 对这n个单 ...

  9. bootstrap切换按钮点击后显示的颜色

    点击按钮后将按钮类库切换为值为btn-success ·· test ·· jquery code ·· $(".tag-checkbox").toggleClass(" ...

  10. laravel框架一次请求的生命周期

    第一件事所有的请求都会被web服务器(Apache/Nginx)导向public/index.php文件.index.php文件载入Composer生成的自动加载设置,然后从bootstrap/app ...