您的位置:首页 > Web前端 > JavaScript

firefox TBODY 用js显示和隐藏时出现错位的解决方法

2008-12-17 00:00 465 查看
看下面这个例子:




function body_load()
{
var obj = document.getElementById("tr1");
obj.style.display = "block";
}






第一行




第二行




第三行






[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
它在firefox中显示时,“第一行”被显示在最后一行。
于是在处理好需要显示的行后,另写了一个函数,先记录需要显示的行,然后将所有行的style.display都设置为"none",最后再将需要显示的行依次显示出来。这样,IE和firefox的显示结果就一样了。
后来,我还是觉得这个方法很笨,就又潜心研究了一番,发现,只要将第二行和都三行都加上style="display:block",显示也就正常了。见下面的代码:




function body_load()
{
var obj = document.getElementById("tr1");
obj.style.display = "block";
}






第一行




第二行




第三行




[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
由此可见,firefox对是否设置style="display:block"是区别对待的,而IE作了适当的兼容处理。
结论和教训是:尽量使用标准做法,不要指望浏览器可以兼容。IE用多了就常常会忘记这点。
注:如果不使用tbody则没有这个问题。但tbody可以起到对行进行分组的作用,当一次需要显示或隐藏多行时很有用。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: