在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& ...
随机推荐
- jackson java对象和json对象的互相转换
概述 Jackson框架是基于Java平台的一套数据处理工具,被称为“最好的Java Json解析器”. Jackson框架包含了3个核心库:streaming,databind,annotation ...
- @RequestBody使用须知
-----------------------siwuxie095 @RequestBody 使用须知 使用 @Requ ...
- Anaconda常用命令大全
使用conda 首先我们将要确认你已经安装好了conda 配置环境 下一步我们将通过创建几个环境来展示conda的环境管理功能.使你更加轻松的了解关于环境的一切.我们将学习如何确认你在哪个环境中,以及 ...
- PTA 7-8 哈利·波特的考试(floyd)
哈利·波特要考试了,他需要你的帮助.这门课学的是用魔咒将一种动物变成另一种动物的本事.例如将猫变成老鼠的魔咒是haha,将老鼠变成鱼的魔咒是hehe等等.反方向变化的魔咒就是简单地将原来的魔咒倒过来念 ...
- thinkphp装修平台源码
每日签到微擎微赞自助授权中心站长工具(new)☜=每日新帖=微信开发手册VIP优惠活动 开启辅助访问切换到宽版 用户名 自动登录 找回密码 密码 登录 立即注册 只需一步,快速开始 首页 微鱼商业 ...
- React-router4 笔记
第一次看React-router发现根据阮一峰老师教程老报错,,完全一样的代码还是报错,,然而到最后才发现自己安装的版本太高了! 由于菜鸟比较新,npm install react-router 这样 ...
- (转)Android EditText限制输入字符的5种实现方式
最近项目要求限制密码输入的字符类型, 例如不能输入中文. 现在总结一下EditText的各种实现方式, 以比较各种方法的优劣. 第一种方式: 设置EditText的inputType属性,可以 ...
- (转)DataRow的各种状态和DataView的两种过滤属性
DataRow的各种状态 http://www.cnblogs.com/zxjyuan/archive/2008/08/20/1271987.html 一个DataRow对象刚被创建之后(DataTa ...
- myeclipse的安装与配置和JUnit的简单使用
安装配置 首先根据自己电脑系统选择合适的JDK版本 http://www.oracle.com/technetwork/java/javase/downloads/index.html 这是JDK下载 ...
- 探索未知种族之osg类生物---呼吸分解之事件循环一
事件循环和更新循环 终于到了我们嘴里经常念叨的事件循环.更新循环以及渲染循环了.首先我们来区分一下事件循环和渲染循环,他们两个首先是两个不同顺序执行的过程,我们有时候会用到任意node的updateC ...