1

テーブルにデータをループして表示するクエリがあります。しかし、IE の奇妙な動作に気付きました。何らかの理由で a<td>をスキップし、テーブル構造全体が奇妙に見えます。これは IE でのみ発生します。

IEで、 画像 sdgdsgdhere を入力してください

クロムでは、 ここに画像の説明を入力

ここに私の 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;}

これは私を狂気に駆り立てており、どんな助けも大歓迎です。

4

1 に答える 1

3

IE9 にはバグがあり、巨大なテーブルを扱うのが難しく、td タグ間の空白から「ゴースト セル」が作成されます。（ええと思いますか？）

修正する最善の方法は、タグ間の空白をすべて削除することです。ファンキーなマークアップになるかもしれませんが、次のようにしてごまかすことができます。

 ...</td><!---//using a CF comment in the white space hides it from the browser, and helps poor IE..
  ---><td>...
于 2013-01-04T18:06:54.553 に答える