TBODY在firefox下用js显示和隐藏时出现错位的解决方法
来源:互联网 发布:支持mac的大型网游 编辑:程序博客网 时间:2024/05/16 12:43
今天帮别人写一个网页,发现:当用javascript动态设置tr.style.display = "block"显示某行时,使用IE浏览没有问题,但使用firefox浏览时该行被移到了其它行的后面,很是诧异。看下面这个例子:
<html>
<head>
<script type="text/javascript">
function body_load()
{
var obj = document.getElementById("tr1");
obj.style.display = "block";
}
</script>
</head>
<body onload="javascript:body_load();">
<table>
<tbody id="tr1" style="display:none">
<tr>
<td>第一行</td>
</tr>
</tbody>
<tbody id="tr2">
<tr>
<td>第二行</td>
</tr>
</tbody>
<tbody id="tr3">
<tr>
<td>第三行</td>
</tr>
</tbody>
</table>
</body>
</html>
它在firefox中显示时,“第一行”被显示在最后一行。
于是在处理好需要显示的行后,另写了一个函数,先记录需要显示的行,然后将所有行的style.display都设置为"none",最后再将需要显示的行依次显示出来。这样,IE和firefox的显示结果就一样了。
后来,我还是觉得这个方法很笨,就又潜心研究了一番,发现,只要将第二行和都三行都加上style="display:block",显示也就正常了。见下面的代码:
<html>
<head>
<script type="text/javascript">
function body_load()
{
var obj = document.getElementById("tr1");
obj.style.display = "block";
}
</script>
</head>
<body onload="javascript:body_load();">
<table>
<tbody id="tr1" style="display:none">
<tr>
<td>第一行</td>
</tr>
</tbody>
<tbody id="tr2" style="display:block">
<tr>
<td>第二行</td>
</tr>
</tbody>
<tbody id="tr3" style="display:block">
<tr>
<td>第三行</td>
</tr>
</tbody>
</table>
</body>
</html>
由此可见,firefox对是否设置style="display:block"是区别对待的,而IE作了适当的兼容处理。
结论和教训是:尽量使用标准做法,不要指望浏览器可以兼容。IE用多了就常常会忘记这点。
注:如果不使用tbody则没有这个问题。但tbody可以起到对行进行分组的作用,当一次需要显示或隐藏多行时很有用。
- TBODY在firefox下用js显示和隐藏时出现错位的解决方法
- firefox中tbody隐藏显示后td错位
- 用tbody和div隐藏和展开页面的效果
- IE9 table显示问题,td出现错位的解决方法
- 表格中的td通过js来显示和隐藏,在firefox中colspan将不起作用
- firefox和chrome 中tr下的td colspan属性在tr 隐藏时无效
- JS网站当前日期在IE9、Chrome和FireFox中年份显示为115年的解决方法
- 关于在有限的宽度和高度下Jquery中的Dialog显示发生错位的问题
- 隐藏的<tbody>
- 动态显示隐藏tbody/div
- JS在firefox和IE下的区别 兼容解决方案
- 在firefox下取得年份的时候出现三位数的解决方法
- 网络加载图片时显示错位的解决方法
- marquee在firefox下,时滚时不滚的解决方法
- js在IE和Firefox下不同之处
- js在IE和Firefox下不同之处
- FireFox下GridView表格线显示、隐藏的问题
- FireFox下GridView表格线显示、隐藏的问题
- “冬天”里的珠三角服装企业1--“我不想卖掉工厂回香港”
- 如何发布一个ASP.NET网站
- [Browsable( true ) , Description( "当前页记录数" ) , Category( "分页" ) , DefaultValue( 0 )]//这一行是什么意思
- asp.net删除文件夹里的文件
- 博客第一天
- TBODY在firefox下用js显示和隐藏时出现错位的解决方法
- 任意对象转化为JSON
- 持续集成——大师的观点
- how to chang android emulator skins
- [转]开放获取期刊
- 2008年年终总结(作者:wogoyixikexie@gliet)
- 日志
- svn的简单配置
- 模板