Question

使用Google Chrome或Firefox时，我的页面正确呈现。但是当使用IE8或IE9时，它几乎无限延伸。它在IE10上运行良好。此页面是用JSF编写的。对不起，这页很长。

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head>

</h:head>
<h:body>
    <ui:composition template="/templates/CenterHomeTemplate.xhtml">
        <ui:define name="main-content">
            <p:dialog widgetVar="statusDialog" modal="true" draggable="false"
                closable="false" resizable="false" showHeader="false">
                <p:graphicImage library="images" name="ajax-loader.gif" />
            </p:dialog>
            <div align="center">
                <h:form prependId="false" id="MigrateAccountForm">
                    <br />

                    <p:messages id="msg" globalOnly="true" autoUpdate="true"
                        showDetail="true" />
                    <p:tooltip />
                    <p:panel header="Enter following data for migating old account">
                        <h:panelGrid columnClasses="col1, col2, col3"
                            rowClasses="row1, row2" columns="3" id="grid">
                            <p:outputLabel for="email" value="Requester Email-id : " />
                            <p:inputText id="email" required="true"
                                value="#{accountCreationBean.email}" title="Your Email-id"
                                validatorMessage="Invalid Email-Id : Email-Id must end with @oracle.com"
                                requiredMessage="Mandatory Field" size="25">
                                <f:validateRegex pattern=".+@oracle\.com$" />
                                <p:ajaxStatus onstart="PF('statusDialog').show()"
                                    onsuccess="PF('statusDialog').hide()" />
                                <p:clientValidator event="blur" />
                                <f:ajax event="blur"
                                    render="manager-email email-msg cost-center group msg username"
                                    listener="#{accountCreationBean.fetchEmailInfo}" />
                            </p:inputText>
                            <p:message id="email-msg" for="email" />
                            <p:outputLabel for="account-type" value="Account Type : " />
                            <p:selectOneRadio required="true"
                                requiredMessage="Mandatory Field" id="account-type"
                                value="#{accountCreationBean.accountType}">
                                <p:ajax event="change" update="username nis-accounts"
                                    listener="#{accountCreationBean.changeAccountType}" />
                                <f:selectItems value="#{accountCreationBean.accountTypes}" />
                            </p:selectOneRadio>
                            <p:message for="account-type" />
                            <p:outputLabel for="username" value="Existing Username : " />
                            <p:inputText id="username"
                                disabled="#{accountCreationBean.accountType == 'Individual'}"
                                required="true" requiredMessage="Mandatory Field" size="25"
                                value="#{accountCreationBean.username}"
                                title="Existing username.">
                                <p:clientValidator event="blur" />
                                <p:ajax global="false" event="blur" update="username-msg"
                                    listener="#{accountCreationBean.checkUserNameAvailability}" />
                            </p:inputText>
                            <p:message id="username-msg" for="username" />
                            <p:outputLabel for="password" value="Password : " />
                            <p:password id="password" match="confirm-password"
                                required="true" requiredMessage="Mandatory Field" size="25"
                                value="#{accountCreationBean.password}"
                                title="Enter old password">
                                <p:clientValidator event="blur" />
                            </p:password>
                            <p:message for="password" />
                            <p:outputLabel for="confirm-password" value="Confirm Password : " />
                            <p:password id="confirm-password" required="true"
                                requiredMessage="Mandatory Field" size="25"
                                value="#{accountCreationBean.confPassword}" />
                            <p:message for="confirm-password" />
                            <p:outputLabel for="manager-email" value="Manager's Email-id : " />
                            <h:outputText id="manager-email"
                                value="#{accountCreationBean.managerEmail}"
                                title="Email-id of your approver." />
                            <p:message for="manager-email" />
                            <p:outputLabel for="nis-accounts"
                                value="Permissible NIS Accounts : " />
                            <p:inputText id="nis-accounts" required="true"
                                disabled="#{accountCreationBean.accountType == 'Individual'}"
                                requiredMessage="Mandatory Field" size="25"
                                value="#{accountCreationBean.nisAccounts}"
                                title="NIS users to be linked with this account. Separate multiple NIS accounts with comma." />
                            <p:message for="nis-accounts" />
                            <p:outputLabel for="privilege" value="Privileges : "
                                title="Select only required privivledges." />
                            <p:selectCheckboxMenu id="privilege" required="true"
                                requiredMessage="Mandatory Field" label="Privileges"
                                value="#{accountCreationBean.selectedPrivileges}">
                                <f:selectItems
                                    value="#{accountCreationBean.privileges.entrySet()}" var="c"
                                    itemLabel="#{c.value}" itemValue="#{c.key}" />
                            </p:selectCheckboxMenu>
                            <p:message for="privilege" />
                            <p:outputLabel for="stack" value="Stack : " />
                            <p:selectOneMenu id="stack" value="#{accountCreationBean.stack}"
                                required="true">
                                <f:selectItems value="#{accountCreationBean.stacks.entrySet()}"
                                    var="c" itemLabel="#{c.value}" itemValue="#{c.key}" />
                            </p:selectOneMenu>
                            <p:message for="stack" />
                            <p:outputLabel for="product-id" value="Product ID : " />
                            <p:inputText id="product-id" required="true"
                                requiredMessage="Mandatory Field" size="5"
                                value="#{accountCreationBean.productId}">
                                <f:validateRegex pattern="[0-9]+" />
                                <p:clientValidator event="blur" />
                                <p:ajax global="false" event="blur"
                                    listener="#{accountCreationBean.populateProductName}"
                                    update="product-name product-id-msg" />
                            </p:inputText>
                            <h:panelGroup>
                                <h:outputText id="product-name"
                                    value=" #{accountCreationBean.productName}" />
                                <p:message id="product-id-msg" for="product-id" />
                            </h:panelGroup>
                            <p:outputLabel for="group" value="Group : " />
                            <h:outputText id="group" value="#{accountCreationBean.group}" />
                            <p:message for="group" />
                            <p:outputLabel for="cost-center" value="Cost Center : " />
                            <h:outputText id="cost-center"
                                value="#{accountCreationBean.costCenter}" />
                            <p:message for="cost-center" />
                            <p:outputLabel for="svp-evp" value="SVP/EVP Email-Id : " />
                            <p:inputText id="svp-evp" required="true"
                                requiredMessage="Mandatory Field"
                                validatorMessage="Invalid Email-Id : Email-Id must end with @oracle.com"
                                size="25" value="#{accountCreationBean.svpEvp}">
                                <f:validateRegex pattern=".+@oracle\.com$" />
                                <p:clientValidator event="blur" />
                            </p:inputText>
                            <p:message for="svp-evp" />
                            <p:outputLabel for="comments" value="Comments : " />
                            <p:inputTextarea id="comments" required="true"
                                requiredMessage="Mandatory Field"
                                value="#{accountCreationBean.comments}" />
                            <p:message for="comments" />
                        </h:panelGrid>
                    </p:panel>
                    <br />
                    <p:commandButton resetValues="true" value="Submit"
                        update="MigrateAccountForm"
                        action="#{accountCreationBean.migrateOldAccount}" />
                    <p:separator />
                    <p:outputLabel style="color: red">
                        <p:commandButton disabled="true" icon="ui-icon-info" />
                        <b>Note : </b>For generic accounts a suffix '_grp' will be added to username, if not present, from version 3.0. Till then, current username will work.
                        </p:outputLabel>
                </h:form>
            </div>
        </ui:define>
    </ui:composition>
</h:body>
</html>

此页面中使用的模板是：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">  

    <h:head>

        <style type="text/css">
            .ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd{
                //border: none; 
                margin: 0;
            }

            .upper-left-menu {
                height: 50px;
            }

            .ui-widget, .ui-widget .ui-widget {
                font-size: 95% !important;
            }

        </style>
    </h:head>

    <h:body>
        <div align="center">
            <table style="border:2; width:70%; border-collapse: collapse">
                <tr style="background: aliceblue;">
                    <td colspan="2">
                        <ui:insert name="header">
                            <ui:include src="/includes/header.xhtml"/>
                        </ui:insert>
                    </td></tr>
                <tr><td colspan="2"><ui:include src="/tabs/tabs.xhtml"/></td></tr>
                <tr>
                    <td colspan="2">
                        <div align="center">
                        <ui:insert name="main-content">
                            <div style="height: 200px">
                                <h4>This is code Signing SErver Home Page.</h4>
                            </div>
                        </ui:insert>
                        </div>
                    </td>                
                </tr>
                <tr style="background: aliceblue">
                    <td style="border-top-color: aliceblue; border-top-style:  groove; border-top-width: thin;" colspan="2"> 
                        <ui:insert name="footer">
                            <ui:include src="/includes/footer.xhtml"/>   
                        </ui:insert>
                    </td></tr>
            </table>
        </div>
    </h:body>
</html>

现在，IE8和9的页面被拉长了很长时间。 enter image description here

是否需要添加一些标记，或者某些css或组件是否会产生问题？

Answer 1

我知道这个问题已经被问过了，但我刚遇到了类似的问题。我希望有人可以从中受益。我正在使用PF 5.2，正如您的问题所示，页面几乎无限延伸。在我的情况下，当切换p：selectCheckboxMenu中的全选复选框时，页面被拉伸。我的页面上的表格已通过我的JS函数填充到切换。我发现当填充表时，会在表标记中添加一个tbody元素标记。删除元素后，会有一个剩余的tbody标记。出于某种原因，IE不喜欢这个。在我的函数中，我根据我从p：selectCheckboxMenu的选择更新了这个表，我添加了这段逻辑，现在页面正确呈现。

//Remove tbody when there are no more elements. In IE this is causing a rendering issue.
        if(table.rows.length === 0){
            if(table.getElementsByTagName('tbody')[0]){
                table.removeChild(table.getElementsByTagName('tbody')[0]);
            }
        }

使用Primefaces在Internet Explorer 8/9上展开页面

1 个答案: