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

看下面这个例子：

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可以起到对行进行分组的作用，当一次需要显示或隐藏多行时很有用。

赞 (0)

相关推荐

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

    看下面这个例子: function body_load() { var obj = document.getElementById("tr1"); obj.style.display = "block"; } 第一行 第二行 第三行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 它在firefox中显示时,"第一行"被显示在最后一行. 于是在处理好需要显示的行后,另写了一个函数,先记录需要显示的行,然后将所有行的style.disp

  • 防止SyntaxHighlighter.js的代码高亮时闪一下的解决方法

    SyntaxHighlighter.js是一个代码高亮的JS插件,使用也很简单,但是由于是浏览器段执行JS代码来着色,会出现视觉上闪一下的效果.比如你的20行代码网页打开显示高度为100px,但是SyntaxHighlighter高亮后该区域高度变为120px 加上颜色的变化,这样的体验特别不好. 解决原理:把pre标签的样式定义为 高亮后的样式即可 解决方法:在shCoreDefault.css文件加上如下样式 pre { line-height:22px !important; backgr

  • js定时器出现第一次延迟的原因及解决方法

    我们在使用js定时器,经常会出现间隔几秒获取一次数据,这是通过setInterval实现的.而且如果setInterval() 参数传递不当,定时器会延迟试行.本文向大家介绍js定时器第一次延迟的原理及实现过程. setInterval() 作用是在播放动画的时,每隔一定时间就调用函数.方法或对象. 语法 setInterval(function(),time); 单位是毫秒 注意:单位是毫秒 定时器第一次延迟执行:采用setInterval实现 var t = setInterval(scro

  • 解决使用Vue.js显示数据的时,页面闪现原始代码的问题

    今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数据时,原始代码会闪现一下.查访各方资料,终的解决方法. 第一步.加入一段css代码 <style type="text/css"> [v-cloak] { display: none; } </style> 第二步.在view上引用css模块 <div id="app" v-cloak> <h1>{{message}}</h1>

  • JS显示表格内指定行html代码的方法

    本文实例讲述了JS显示表格内指定行html代码的方法.分享给大家供大家参考.具体如下: 下面的js代码演示了如何通过表格的rows数组获得指定行的html代码,包含了所有列 <!DOCTYPE html> <html> <head> <script> function showRow() { alert(document.getElementById('myTable').rows[0].innerHTML); } </script> </

  • js实现鼠标经过时图片滚动停止的方法

    本文实例讲述了js实现鼠标经过时图片滚动停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • jQuery对于显示和隐藏等常用状态的判断方法

    本文实例讲述了jQuery对于显示和隐藏等常用状态的判断方法.分享给大家供大家参考.具体方法如下: 显示:show()  display:block; 隐藏:hide()   display:none; 当显示和隐藏切换的时候,需要判断此刻是显示还是隐藏,那判断条件常用以下几种方法: 1. 复制代码 代码如下: if(thisNode.is(':hidden')){......}else{.......} 2.首先给thisNode的Dom元素加class标识,例如改标识为class="show

  • vue渲染大量数据时卡顿卡死解决方法

    vue渲染大量数据时卡顿卡死解决方法

    目录 1. 问题描述 2. 常见的解决方案 3. 解决方案流程图 4. 代码 1. 问题描述 由于业务需求,需要在一个页面中点击查询按钮时加载出所有的数据,但数据量有近10万条,渲染出现卡顿,页面卡死. 2. 常见的解决方案 - 自定义中间层 自定义nodejs中间层,获取并拆分这10w条数据, 前端对接nodejs中间层,而不是服务器 缺点:成本高 - 虚拟列表 只渲染可视区域DOM,其他隐藏区域不显示,只用div撑起高度,随着浏览器滚动,创建和销毁DOM. 虚拟列表实现起来非常复杂,可借用第

  • thinkPHP使用post方式查询时分页失效的解决方法

    thinkPHP使用post方式查询时分页失效的解决方法

    本文实例讲述了thinkPHP使用post方式查询时分页失效的解决方法.分享给大家供大家参考,具体如下: 昨天晚上一直没有解决的php项目中的bug,就在刚才终于搞定,在这里还需要感谢各位大神给的帮助! 具体问题描述 最近遇到一个非常棘手的问题,也是因为刚入手thinkphp.在做项目的过程中,因为需要非常多的查询条件,如果以get方式提交表单的话,会因为url长度限制而报错,所以必须使用post方式提交表单数据,但是在分页的过程中,遇到了问题,因为thinkphp自带的分页是以a标签的形式,进

  • thinkPHP显示不出验证码的原因与解决方法分析

    本文实例讲述了thinkPHP显示不出验证码的原因与解决方法.分享给大家供大家参考,具体如下: 今天到公司,svn update代码后,在浏览器上输入域名后,在验证码那块显示不出,找了半个上午,后来仔细看了下apache的配置文件 <VirtualHost *:80> ServerName admin.exam.com DocumentRoot E:/www/exam/trunk/server/Admin/ <Directory E:/www/exam/trunk/server/apps

随机推荐