使用firefox的一个小技巧

今天帮别人写一个网页，发现：当用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可以起到对行进行分组的作用，当一次需要显示或隐藏多行时很有用。

转载于:https://www.cnblogs.com/belaliu/archive/2007/04/01/695622.html