IE跳过了

Question

我有一个循环查询并在表格中显示数据。但是我注意到IE中有一个奇怪的行为。由于某种原因，它跳过<td>并使整个表结构看起来很奇怪。这只发生在IE中。

在IE中

在Chrome中

这是我的HTML，， 我想说，这是我的cfm

<TABLE id="WorkOrderList">
  <TBODY>
    <cfloop query="qGetClosed">
    <TR class="spacer"><td>&nbsp;</td></TR>
    <TR>
      <TH id="woNum" class="woNum_cls" rowspan="2"> 
        <a href="WorkOrderAssign.cfm?WONUM=#URLEncodedFormat(trim(qGetClosed.WONUM))#&CanAssign=No">#trim(qGetClosed.WONUM)#</a>
      </TH>
      <TH class="woPriority_cls #pClr#">#trim(qGetClosed.PRIORITY)#</TH> 
      <TH class="woLocation_cls">#trim(qGetReqInfo_MyTables.woLocation)#</TH>
      <TH class="woStatus_cls">#trim(qGetClosed.DELAYDESC)#</TH>    
      <TH class="woRequester_cls">#trim(qGetClosed.UD1)#</TH>
      <TH class="woDate_cls">#DATEFORMAT(qGetClosed.REQUESTDATE,"mm/dd/yyyy")#</TH>
      <TH class="woAssigned_cls">
        <DIV class="woAssigned_Bottom">
          <div class="woAssigned_By">
            <cfif #trim(qGetClosed.ASSIGNEDBY)# NEQ ''>
              #trim(qGetClosed.ASSIGNEDBY)#
            <cfelse>
              <i>n/a</i>
            </cfif>
          </div>
          <div class="woAssigned_Date">
            <cfif IsDefined('qGetClosed.SCHEDSTARTDATE') AND #qGetClosed.SCHEDSTARTDATE# NEQ ''>
              #DateFormat(qGetClosed.SCHEDSTARTDATE, "mm/dd/yyyy")#
            <cfelse>
              n/a
            </cfif>
          </div>
          <div class="woAssigned_To">
            <cfif #trim(qGetClosed.ASSIGNEDTO)# IS ''>
              <i>n/a</i>
            <cfelseif #trim(qGetClosed.ASSIGNEDTO)# IS 'n/a'>
              <i>n/a</i>
            <cfelse>
              #trim(qGetClosed.ASSIGNEDTO)#
            </cfif>
          </div>
        </DIV>
      </TH>
      <TH class="woDate_cls">#DATEFORMAT(qGetClosed.COMPLETIONDATE,"mm/dd/yyyy")#</TH>
      <TH class="woDuration_cls" rowspan="2">#trim(qGetClosed.DURATION)# day(s)</TH>
    </TR>
    <TR>
      <TH class="woDescription" colspan="7">&nbsp;#trim(qGetClosed.DESCRIPTION)#</TH>   
    </TR>
    </cfloop>
  </TBODY>
</TABLE>

这是我的CSS，

/*---------Entire List Work Order------*/
.woNum_cls{width:65px; text-transform:uppercase;}
.woReminder_cls{width:80px; text-align:center;}
.woPriority_cls{width:15px;}
.woLocation_cls{width:125px;}
.woStatus_cls{width:125px; left:500em;}
.woRequester_cls{width:100px;}
.woDate_cls{width:100px;}
.woAssigned_cls{width:160px;}
.woDuration_cls{width:78px;}

TABLE#WorkOrderList{
  border-collapse:collapse; border-spacing:0px; border:0px;
  width:975px;
  display:table;
}
TABLE#WorkOrderList THEAD TH{
  color: #000; background-color:#9999FF;
  border: 1px solid black; border-spacing:0px;
  text-transform:uppercase; text-align:left;
  font-weight:bold;
  padding:0px 2px 0px 3px;
}
TABLE#WorkOrderList TBODY TH{padding:0px 2px 0px 3px; line-height:none; display:table-cell;}
TABLE#WorkOrderList TBODY TH:not(.woDescription){font-weight:bold;}
TABLE#WorkOrderList TBODY TH:not(.woPriority_cls){background-color:#E6F2F2;}

.woAssigned .woAssigned_Top{text-align:center;}
.woAssigned .woAssigned_Bottom{text-align:left;}

.woAssigned_Bottom .woAssigned_By{width:25px; float:left;}
.woAssigned_Bottom .woAssigned_Date{width:90px; float:left; text-align:center;}
.woAssigned_Bottom .woAssigned_To{width:30px; float:right;}    

TABLE#WorkOrderList TBODY TH{border:1px dotted #006A35;} 
TABLE#WorkOrderList #woNum{border:1px solid blue;}
TABLE#WorkOrderList #woReminder{border:1px solid blue;}

这让我疯了，非常感谢任何帮助。

Answer 1

IE9中有一个错误，它很难处理大型表格，并在td标记之间的空白处创建“幽灵单元格”。 （去图呃？）

最好的修复方法是尝试删除标记之间的所有空格。可能会产生时髦的标记，但你可以通过做这样的事情来欺骗：

 ...</td><!---//using a CF comment in the white space hides it from the browser, and helps poor IE..
  ---><td>...