p：在Internet Explorer 8中呈現dataList

Question

我的頁面包含另一個數據列表中的數據列表。外部數據列表模擬手風琴面板，而內部數據列表呈現我的動態列。

一切工作正常，但Internet Explorer 8在Firefox和Chrome方面的行爲不同，因爲在生成的html中，它呈現一些空白對象，在數據之前留下空白空間。

該屏幕截圖顯示了Explorer 8和Firefox之間的區別。

火狐生成的HTML：

瀏覽器8生成的HTML：

火狐渲染：

瀏覽器8渲染：

下面是代碼：

<p:dataList id="data" styleClass="myDataList" value="#{bean.getAnag(idSito)}" var="tipologia" itemType="disc" type="definition"> 
    <div class="ui-accordion ui-widget ui-helper-reset ui-hidden-container tabAccordion" style="width: 100%;"> 
    <table id="accordionFake#{idSito}" border="1" class="table-din-col" style="display: none; margin-bottom: 10px;"> 
     <!-- HEADERS --> 
     <tr class="table-din-col-titolo"> 
     <td style="padding: 4px;"> 
      <h:outputText value="Codice" /> 
     </td> 
     <td style="padding: 4px;"> 
      <h:outputText value="Descrizione" /> 
     </td> 
     <td style="padding: 4px;"> 
      <h:outputText value="CodiceAgg" /> 
     </td> 
     <td style="padding: 4px;"> 
      <h:outputText value="Pos" /> 
     </td> 
     <p:dataList value="#{bean.buildColumns(idSito)}" var="colDin" type="definition"> 
      <td> 
      <h:outputText value="#{colDin.header}" /> 
      </td> 
     </p:dataList> 
     </tr> 
     <!-- HEADERS --> 

     <!-- ROWS BUILDING -->       
     <p:dataList id="dataL" var="rilevazione" selectionMode="single" 
       value="#{bean.getLsLoc(idSito)}" type="definition"> 
     <tr class="table-din-col-righe"> 
      <td class="table-din-col-colonne"> 
      <h:outputText id="codice" value="#{rilevazione.codice}" /> 
      </td> 
      <td class="table-din-col-colonne"> 
      <h:outputText id="desc" value="#{rilevazione.descrizione}" /> 
      </td> 
      <td class="table-din-col-colonne"> 
      <h:outputText id="codSnam" value="#{rilevazione.codiceAgg}" /> 
      </td> 
      <td class="table-din-col-colonne"> 
      <h:outputText id="pos" value="#{rilevazione.pos}" /> 
      </td> 

      <p:dataList value="#{bean.buildColumns(idSito)}" var="colDin" type="definition"> 
      <td class="table-din-col-colonne"> 
       <h:outputText value="#{colDin.property.valore}" /> 
      </td> 
      </p:dataList> 
     </tr> 
     </p:dataList> 
     <!-- ROWS BUILDING --> 
    </table> 
    </div 
</p:dataList> 

如何指示ie8正確呈現數據列表？

在此先感謝。

Answer 1

看起來您爲此目的使用了錯誤的組件，或者至少對基本HTML沒有理解/熟悉。

的<p:dataList>讓您可以生成一個HTML <ul><li>（無序列表），<ol><li>（有序列表）或<dl><dt><dd>（定義列表）的選項。

但是，您似乎是在生成了一個普通的香草HTML <table><tr><td>，其中所有單元格都是硬編碼的。您在<tr>內嵌套了一個<p:dataList type="definition">，這隻會生成<dl><dt><dd>元素，其中<td>元素是預期的。這僅在illegal HTML syntax結束。 IE對此非常敏感。

您應該用<ui:repeat>替換嵌套的<p:dataList type="definition">組件。它不會生成任何HTML，並且您的HTML將最終在語法上有效（儘管我想知道如何有一個<dl><dt><dd><table>，畢竟我也建議學習basic HTML，以便您可以更好地理解要選擇哪些JSF組件爲目的）。