使用p / h里面的链接：panelGrid列

Question

我在<p:commandLink>内使用<p:panelGrid>，如下所示。

<p:panelGrid columns="1" style="width: 50%;">
    <p:commandLink>
        <h:outputText styleClass="ui-icon ui-icon-search"/>
    </p:commandLink>

    <p:commandLink>
        <h:outputText styleClass="ui-icon ui-icon-search"/>
    </p:commandLink>

    <p:commandLink>
        <h:outputText styleClass="ui-icon ui-icon-search"/>
    </p:commandLink>
</p:panelGrid>

在这种情况下，<p:panelGrid>内的列所包围的区域如下图所示，可完全点击

但不是Internet Explorer（8）的情况，在这种情况下，唯一可点击的项目是styleClass的{​​{1}}属性所指示的链接图标。

有没有办法让整个<h:outputText>列可以在Internet Explorer上点击？

Answer 1

为了让元素跨越整个表格单元格，有问题的元素需要将CSS display属性设置为block。在这种特殊情况下，这已经通过.ui-icon元素上的<span>类设置，由<h:outputText>表示。但是，.ui-icon反过来定义了背景图像。 IE错误地将背景图像附加到父元素而不是当前元素。您还需要将父元素设置为display:block，在您的情况下，由<p:commandLink>表示的HTML元素。

E.g。这应该做：

<p:panelGrid columns="1" styleClass="search">
    <p:commandLink>
        <h:outputText styleClass="ui-icon ui-icon-search"/>
    </p:commandLink>

    <p:commandLink>
        <h:outputText styleClass="ui-icon ui-icon-search"/>
    </p:commandLink>

    <p:commandLink>
        <h:outputText styleClass="ui-icon ui-icon-search"/>
    </p:commandLink>
</p:panelGrid>

使用

table.search {
    width: 50%;
}
table.search a {
    display: block;
}

这不应影响真实浏览器中的行为。