p:dataList 在 Internet Explorer 8 中呈现

Question

我的页面包含另一个数据列表中的数据列表。外部数据列表模拟手风琴面板，而内部数据列表呈现我的动态列。

一切正常，但 Internet Explorer 8 与 Firefox 和 Chrome 的行为不同，因为在生成的 html 中它呈现了一些空对象，这些对象在数据之前留下了一个空白区域。

屏幕截图显示了 Explorer 8 和 Firefox 之间的差异。

Firefox 生成的 HTML：

Explorer 8 生成的 HTML：

Firefox 渲染：

Explorer 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">，它只会在预期 <td> 元素的位置生成 <dl><dt><dd> 元素。这只会在illegal HTML syntax 中结束。 IE 对此相当敏感。

您应该将嵌套的<p:dataList type="definition"> 组件替换为<ui:repeat>。它不会生成任何 HTML，并且您的 HTML 最终会在语法上有效（尽管我想知道拥有 <dl><dt><dd><table> 有什么意义，毕竟我建议也学习 basic HTML，以便您更好地理解哪个JSF 组件来选择）。