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可以起到对行进行分组的作用,当一次需要显示或隐藏多行时很有用。
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可以起到对行进行分组的作用,当一次需要显示或隐藏多行时很有用。
相关文章推荐
- firefox TBODY 用js显示和隐藏时出现错位的解决方法
- TBODY在firefox下用js显示和隐藏时出现错位的解决方法
- table表格js简单操作隐藏与显示出现结构错乱解决方法
- JS网站当前日期在IE9、Chrome和FireFox中年份显示为115年的解决方法
- firefox中tbody隐藏显示后td错位
- JS网站当前日期在IE9、Chrome和FireFox中年份显示为113年的解决方法 getFullYear();
- 点击显示子菜单,离开隐藏子菜单(onmouseout下包含a标签的js解决方法)
- jquery------显示加载的js时出现中文乱码解决方法
- IE9 table显示问题,td出现错位的解决方法
- FireFox下出现虚线轮廓解决的方法
- firefox播放优酷,土豆视频,出现 “浏览器兼容性问题,视频不能播放了”的解决方法
- Mac OS X El Capitan(10.11)显示隐藏文件命令失效解决方法
- Windows不能显示隐藏文件解决方法
- Extjs 3.3 隐藏工具栏 出现Bug 的解决方法
- Extjs显示时间兼容性问题——firefox正常显示,IE不正常出现NaN-NaN-NaN的解决方式
- JS代码解决层显示/隐藏问题
- ubuntu13.04升级到ubuntu13.10 ZendStudio 或者ecplise 出现 菜单不显示的解决方法
- 【Vegas原创】访问owa,图片和js脚本不能正常显示和使用的解决方法
- fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
- js tr控制下面的tbody隐藏和显示