不知道你有没有做过这样的一种效果，一个table中的一个连接，javascript 控制 tr 的显示隐藏，来达到显示更多数据的效果。如果没做过，尝试一下吧，你会发现，table中隐藏的tr的含有colspan的td 在再次显示以后，firefox会把内容合并到 第一个td里。
有点绕，把下面的代码copy以后另存为.html 打开 就知道我说的是什么问题了。锻炼自己的动手能力，我就不贴图了，想知道原因跟解决办法就看下去吧。
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>tr 的显示隐藏display属性导致td colspan问题--imouou.com</title>
06 <link href="" type="text/css" rel="stylesheet" ></link>
07 <style>
08 #table {width:80%;border:1px solid #ccc;border-collapse:collapse;}
09 #table td{border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
10 </style>
11
12 </head>
13
14 <body>
15 <table id="table">
16 <tr>
17 <td>1</td>
18 <td>2</td>
19 <td>3</td>
20 <td>4</td>
21 <td>5</td>
22 <td><a href="#" id="view" class="view">查看</a></td>
23 </tr>
24 <tr id="dis">
25 <td>1</td>
26 <td colspan="6">这里的信息默认是合并了6列的效果，</td>
27 </tr>
28 <tr>
29 <td>1</td>
30 <td>2</td>
31 <td>3</td>
32 <td>4</td>
33 <td>5</td>
34 <td><a href="#" id="view" class="view">查看</a></td>
35 </tr>
36 <tr id="dis2" style="display:block;">
37 <td>第一个td</td>
38 <td colspan="6">当display等于 block 或者 inline 以后，这里在firefox的效果会变成跟 “第一个td” 在一起，然后这里为空</td>
39 </tr>
40 </table>
41 </body>
42 </html>
通过 class 为view的链接，显示隐藏 id 为 dis 的tr ，当tr的属性为 display:block 或者 display:inline 的时候，firefox就会出现显示错误了。 这个究竟是什么原因引起的？我用jquery的 show();hide();来控制显示时，就没有这个问题。看了jquery1.3.2的第3785行show() 函数，里面除了设置它的display属性以外，还多了一个elem.remove();不知道是不是跟这个有关。
01 if ( elemdisplay[ tagName ] ) {
02 display = elemdisplay[ tagName ];
03 } else {
04 var elem = jQuery("<" + tagName + " />").appendTo("body");
05
06 display = elem.css("display");
07 if ( display === "none" )
08 display = "block";
09
10 elem.remove();
11
12 elemdisplay[ tagName ] = display;
13 }
是table的块元素引起的吗？那怎么inline了以后也会？后来查到csdn有篇文章，好像是firefox的display:block有缓存，那是不是跟上面的elem.remove()也是一样的？display:”没有参数的时候，默认是显示元素，我把应该显示的 display:block 改为 display:” ；解决了firefox的colspan这个问题。但是为什么会这样，还是一知半解，你知道吗？
jquery的demo
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>tr 的显示隐藏display属性导致td colspan问题--imouou.com</title>
06 <link href="" type="text/css" rel="stylesheet" ></link>
07 <style>
08 #table {width:80%;border:1px solid #ccc;border-collapse:collapse;}
09 #table td{border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
10 </style>
11 <script src="http://www.imouou.com/js/jquery.js" type="text/Javascript" ></script>
12
13 <script>
14 $(function(){
15 $("#view").toggle(function(){
16 $("#dis").show();
17 },function(){
18 $("#dis").hide();
19 })
20 })
21 </script>
22 </head>
23
24 <body>
25 <table id="table">
26 <tr>
27 <td>1</td>
28 <td>2</td>
29 <td>3</td>
30 <td>4</td>
31 <td>5</td>
32 <td><a href="#" id="view" class="view">查看</a></td>
33 </tr>
34 <tr id="dis" style="display:none;">
35 <td>1</td>
36 <td colspan="6">这里的信息默认是合并了6列的效果，当display等于 block 或者 inline 以后，这里在firefox的效果会变成跟 1 在一起，然后这里为空</td>
37 </tr>
38 </table>
39 </body>
40 </html>
1 楼
zhaoxiu_1945
2011-11-03
。。。 你现在知道什么原因了吗，我按照你的方法解决了问题，但是这是问什么啊
2 楼
SunsetGrace1
2012-03-13
我也遇到了，解决方法如下
var display=$('#'+attendlistid).attr('class');
if(display=="hidden"){
$('#'+attendlistid).show();
$('#'+attendlistid).removeClass(display).addClass("show");//已失效，起作用的只是show()，只是作为显示隐藏的条件判断用，为了FF下clospan合并为1个单元格的问题
$('#attendbtn_'+courseid).val('<%=user.get("ht.university.attendlistbtnhide")%>');
}else{
$('#'+attendlistid).hide();
$('#'+attendlistid).removeClass(display).addClass("hidden");
$('#attendbtn_'+courseid).val('<%=user.get("ht.university.attendlistbtn")%>');
}
var display=$('#'+attendlistid).attr('class');
if(display=="hidden"){
$('#'+attendlistid).show();
$('#'+attendlistid).removeClass(display).addClass("show");//已失效，起作用的只是show()，只是作为显示隐藏的条件判断用，为了FF下clospan合并为1个单元格的问题
$('#attendbtn_'+courseid).val('<%=user.get("ht.university.attendlistbtnhide")%>');
}else{
$('#'+attendlistid).hide();
$('#'+attendlistid).removeClass(display).addClass("hidden");
$('#attendbtn_'+courseid).val('<%=user.get("ht.university.attendlistbtn")%>');
}
3 楼
SunsetGrace1
2012-03-13
SunsetGrace1 写道
我也遇到了，解决方法如下
var display=$('#'+attendlistid).attr('class');
if(display=="hidden"){
$('#'+attendlistid).show();
$('#'+attendlistid).removeClass(display).addClass("show");//已失效，起作用的只是show()，只是作为显示隐藏的条件判断用，为了FF下clospan合并为1个单元格的问题
}else{
$('#'+attendlistid).hide();
$('#'+attendlistid).removeClass(display).addClass("hidden");
}
var display=$('#'+attendlistid).attr('class');
if(display=="hidden"){
$('#'+attendlistid).show();
$('#'+attendlistid).removeClass(display).addClass("show");//已失效，起作用的只是show()，只是作为显示隐藏的条件判断用，为了FF下clospan合并为1个单元格的问题
}else{
$('#'+attendlistid).hide();
$('#'+attendlistid).removeClass(display).addClass("hidden");
}