博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
在table中<tr>的display:block显示布局错乱
阅读量:7223 次
发布时间:2019-06-29

本文共 481 字,大约阅读时间需要 1 分钟。

hot3.png

当用谷歌浏览器时,在将表格table中的<tr>的display属性从none改为block时,或出现所有的td都不起作用,内容都集中在第一列里,然后在网上百度了一下,一下事原因分析和解决方法

1、当表格为多列的情况下,属性为"display:block"行的内容宽度仅与第一列宽度相同,也就是说无论你使colspan的属性值为多少,剩余列的空间都不进行解析。

2、同一行反复的在"display:none;"与"display:block;"两个状态间切换时,表格的底部会持续的产生多余的空白空间以至于造成页面布局的扭曲。
解决方法:
1、用display:table-row属性来调试,发现者FireFox下正常了,但IE是不支持改属性的,怎么办呢?用JS来做判断,然后做兼容吧。
2、另外一个很简单也很可行的方法,就是用 display:' ' 这个属性dispaly后面不加任何的东西,很奇怪,这样就兼容了Firefox和IE了。具体原因有待牛人分析。

转载于:https://my.oschina.net/pumpkin0523/blog/498759

你可能感兴趣的文章
偏函数
查看>>
angular2怎么获取下拉框的值
查看>>
[转]NMON服务器监控、指标说明
查看>>
Cadence OrCAD Cpature创建Title Block
查看>>
数据强转
查看>>
HDU-4342 History repeat itself 二分
查看>>
C# 实现快捷键几种方法
查看>>
说说Android桌面(Launcher应用)背后的故事(三)——CellLayout的秘密
查看>>
Latest crack software ftp download
查看>>
制作毛玻璃效果 分类: ios技术 2015-07-...
查看>>
javascript中加号(+)操作符的作用
查看>>
修改host文件屏蔽视频广告和网站
查看>>
mapreduce多文件输出的两方法
查看>>
JAVA 内存详解 (理解 JVM 如何使用 Windows 和 Linux 上的本机内存)
查看>>
Spring Boot (十三): Spring Boot 小技巧
查看>>
MySql Connector/NET MySql.Data.Entity.EF6 6.9.5 Contains 语句
查看>>
File.basename
查看>>
java的对象的总结:(PO,VO,DAO,BO,POJO)
查看>>
WDA-1
查看>>
Oracle数据库体系结构(4)oracle控制文件
查看>>