【发布时间】：2013-12-12 10:52:15
【问题描述】：
我有一个使用 Richfaces 3.X 的项目。
当用户点击编辑按钮时，会弹出一个模态面板。
现在的问题是这个模态面板看起来是透明的。
这只发生在 IE 11 中，它与其他浏览器（包括其他版本的 IE）完全兼容。
有人知道为什么会这样吗？
这是负责模态面板的一段代码：
<rich:modalPanel id="wizardGeneric#{id}" autosized="true" minWidth="#{empty wizardWidth ? 500 : wizardWidth}"
minHeight="#{ empty wizardHight ? (wizard.showNavigation ? 430 : 400 ) : wizardHight}"
maxHeight="#{empty wizardHight ? 400 : wizardHight}" rendered="#{wizard.modalOpened}"
showWhenRendered="true" styleClass="wizardZIndex wizardGenericPanel"
top = "30" left = "100"
controlsClass = "wizardModalControlClass"
onmove="if(document.selection) document.selection.empty(); else if(window.getSelection) window.getSelection().removeAllRanges();">
<f:facet name="header">
<h:panelGroup styleClass="wizardGenericHeader" id="wizardGenericHeader#{id}" />
</f:facet>
<h:form id="wizardGenericForm#{id}" styleClass="edit wizardGenericFormClass" enctype="multipart/form-data">
<h:panelGrid styleClass="wizardGenericPrevNext" id="wizardGenericPrevNext#{id}" rendered="#{wizard.showNavigation}">
<h:panelGroup>
<a:commandLink
value="#{messages.prevEntry} #{wizard.className}"
rendered="#{wizard.hasPrevious()}"
eventsQueue = "eventsQueue"
action="#{wizard.goToPrevious()}"
reRender="wizardGenericPrevNext#{id}, wizardGenericHeaderPageTitle#{id}, wizardGenericHeaderStepTitle#{id}, wizardGenericDescription#{id}, wizardGenericFormSDiv#{id}"
style="margin-right:15px;" />
<a:commandLink
value="#{messages.nextEntry} #{wizard.className}"
rendered="#{wizard.hasNext()}"
eventsQueue = "eventsQueue"
action="#{wizard.goToNext()}"
reRender="wizardGenericPrevNext#{id}, wizardGenericHeaderPageTitle#{id}, wizardGenericHeaderStepTitle#{id}, wizardGenericDescription#{id}, wizardGenericFormSDiv#{id}" />
</h:panelGroup>
</h:panelGrid>
<s:div styleClass="wizardGenericDescription" id="wizardGenericDescription#{id}">
<h:panelGrid columns="2" id="wizardGenericDescriptionPg#{id}" styleClass="wizardGrid" columnClasses="wizardExclamation,wizardDesc" rendered="#{wizard.showDescription}">
<h:panelGroup>
<h:outputText value="!" />
</h:panelGroup>
<h:panelGroup>
<h:outputText value="#{wizard.aktSite.pageDescription.getText()}"/>
</h:panelGroup>
</h:panelGrid>
</s:div>
<s:div id="wizardGenericFormSDiv#{id}" styleClass="wizardGenericPanelInner" style="display:block;">
<s:div styleClass="wizardIncludedStepContainer" style="height:#{empty wizardHight ? 340 : wizardHight-70}px;margin: 0 0 30px;">
<s:div id="msgWizard#{id}" style="overflow-y:visible;overflow-x:hidden;margin:10px;">
<h:messages id="msgWizardMsg#{id}" styleClass="message"
errorClass="errormsg" infoClass="infomsg" warnClass="warnmsg"
rendered="#{showGlobalMessages != 'false'}" />
</s:div>
<a:include styleClass="includedStepContent" id="includedStepContent#{id}" viewId="#{wizard.aktSite.pageName}"
rendered="#{!empty wizard.aktSite}" />
</s:div>
<h:panelGrid columns="2" id="wizardGenericButtons#{id}" styleClass="wizardBgButtonsBottom" width="100%">
<h:panelGroup styleClass="wizardGenericNavigation" id="wizardGenericNavigation#{id}" style="float:left">
<a:commandButton action="#{wizard.prevStep}" styleClass="wizardButtonsBottom"
eventsQueue="eventsQueue" id="wizardGenericPrev#{id}"
limitToList="true"
disabled="#{!wizard.previous}"
reRender="wizardGenericControls#{id}, wizardGenericHeaderPageTitle#{id}, wizardGenericHeaderStepTitle#{id}, wizardGenericDescription#{id}, wizardGenericFormSDiv#{id}"
bypassUpdates="#{wizard.hasChild()}"
ajaxSingle = "#{wizard.hasChild()}"
immediate = "#{wizard.hasChild()}"
type="button" value="#{msg.back}" />
<rich:spacer width="5px" />
<a:commandButton action="#{wizard.nextStep}" styleClass="wizardButtonsBottom"
eventsQueue="eventsQueue" id="wizardGenericNext#{id}"
limitToList="true"
disabled="#{!wizard.next}"
reRender="wizardGenericControls#{id}, wizardGenericHeaderPageTitle#{id}, wizardGenericHeaderStepTitle#{id}, wizardGenericDescription#{id}, wizardGenericFormSDiv#{id}"
type="button" value="#{msg.next}" />
</h:panelGroup>
<h:panelGroup id="wizardGenericOps#{id}" style="float:right">
<a:outputPanel ajaxRendered="true">
<a:commandButton action="#{wizard.submit}" styleClass="wizardButtonsBottom"
disabled="#{not(wizard.submit)}" eventsQueue="eventsQueue"
id="wizardGenericSubmit#{id}"
reRender="wizardGenericSDiv#{id}, #{reRender}"
rendered="#{empty hideSaveBtn}"
type="button" value="#{empty saveBtn ? msg.save : saveBtn}">
<f:param name = "firstRead" value = "true"/>
</a:commandButton>
<rich:spacer width="5px" />
<a:commandButton styleClass="wizardButtonsBottom"
action="#{wizard.saveAndNew}"
disabled="#{not(wizard.submit)}"
eventsQueue="eventsQueue"
id="wizardGenericSaveAndNew#{id}"
limitToList="true"
reRender="wizardGeneric#{id}, #{reRender}"
rendered="#{empty hideDisableNewBtn}"
type="button"
value="#{empty saveAndNewBtn ? msg.saveAndNew : saveAndNewBtn}">
<f:param name = "firstRead" value = "true"/>
</a:commandButton>
<rich:spacer width="5px" />
</a:outputPanel>
<a:commandButton styleClass="wizardButtonsBottom"
action="#{wizard.reset}" ajaxSingle="true"
bypassUpdates="true" eventsQueue="eventsQueue"
id="wizardGenericReset#{id}"
immediate="true" limitToList="true" reRender="wizardGenericSDiv#{id}, #{renderOnReset}"
type="button" value="#{msg.abbrechen}"
actionListener="#{rich:findComponent('includedStepContent'.concat(id)).getChildren().clear()}"/>
</h:panelGroup>
</h:panelGrid>
<script>
resizetable();
</script>
</s:div>
<rich:panel styleClass="wizardStepsContainer" id="wizardGenericHeaderStepTitle#{id}" bodyClass="wizardSteps">
<c:if test="#{wizard.stepNumbetLast gt 1}">
<c:forEach var="step" begin="1" end="#{empty stepNumbetLast ? wizard.stepNumbetLast : stepNumbetLast}" step="1">
<a:commandLink rendered="#{wizard.isStepActive(step) and step eq (wizard.stepNumbetCurrent-1)}" action="#{wizard.prevStep}" value="#{wizard.stepNumbetCurrent-1}" title="#{wizard.stepName(step)}"
styleClass="stepleft" eventsQueue="eventsQueue"
reRender="wizardGenericControls#{id}, wizardGenericHeaderPageTitle#{id}, wizardGenericHeaderStepTitle#{id}, wizardGenericDescription#{id}, wizardGenericFormSDiv#{id}" />
<a:commandLink rendered="#{wizard.isStepActive(step) and step eq (wizard.stepNumbetCurrent+1)}" action="#{wizard.nextStep}" value="#{wizard.stepNumbetCurrent+1}" title="#{wizard.stepName(step)}"
styleClass="stepright" eventsQueue="eventsQueue" ajaxSingle="#{wizard.hasChild()}"
reRender="wizardGenericControls#{id}, wizardGenericHeaderPageTitle#{id}, wizardGenericHeaderStepTitle#{id}, wizardGenericDescription#{id}, wizardGenericFormSDiv#{id}" />
<a:commandLink rendered="#{wizard.isStepActive(step) and step != (wizard.stepNumbetCurrent-1) and step != wizard.stepNumbetCurrent and step != (wizard.stepNumbetCurrent+1) and wizard.edit}"
action="#{wizard.goToStep(step)}" value="#{step}" title="#{wizard.stepName(step)}" eventsQueue="eventsQueue" ajaxSingle="#{wizard.hasChild()}"
styleClass="#{(step lt wizard.stepNumbetCurrent ? 'stepleft' : (step gt wizard.stepNumbetCurrent ? 'stepright' : 'stepcurrent'))}"
reRender="wizardGenericControls#{id}, wizardGenericHeaderPageTitle#{id}, wizardGenericHeaderStepTitle#{id}, wizardGenericDescription#{id}, wizardGenericForm#{id}" />
<h:outputText value="#{step}" rendered="#{!wizard.isStepActive(step) or ((step != (wizard.stepNumbetCurrent-1) and step != (wizard.stepNumbetCurrent+1) and !wizard.edit)) or (step eq wizard.stepNumbetCurrent and wizard.edit)}"
styleClass="#{(step lt wizard.stepNumbetCurrent ? 'stepleft' : (step gt wizard.stepNumbetCurrent ? 'stepright' : 'stepcurrent'))}"
title="#{(step != wizard.stepNumbetCurrent ? wizard.stepName(step) : '')}" />
</c:forEach>
</c:if>
</rich:panel>
<h:panelGroup styleClass="wizardGenericControls" id="wizardGenericControls#{id}">
<h:outputText value="#{wizard.pageTitleShort}" title="#{wizard.pageTitle}"
styleClass="wizardGenericHeaderPageTitle" id = "wizardGenericHeaderPageTitle#{id}" />
<rich:spacer width="10" height="10" />
<a:commandLink
rendered="#{!empty wizard.aktSite.pageDescription.getText()}"
action="#{wizard.switchShowDescription}"
reRender="wizardGenericFormSDiv#{id},wizardGenericDescription#{id},showDescription#{id}"
eventsQueue="eventsQueue"
id="showDescription#{id}"
ignoreDupResponses = "true"
title = "#{wizard.showDescription ? msg.hideDescription : msg.showDescription}">
<h:panelGroup>
<h:outputText value="i" styleClass="wizardHelp"/>
</h:panelGroup>
</a:commandLink>
<h:outputLink target="_blank" value="/profiler/help.pdf">
<h:panelGroup>
<h:outputText value="?" styleClass="wizardHelp"/>
</h:panelGroup>
</h:outputLink>
</h:panelGroup>
</h:form>
</rich:modalPanel>
【问题讨论】：
-
我们不需要看那么多代码，如果问题出在面板上，内容就无关紧要了；) 很可能是 CSS 相关的，您应该检查代码并检查面板的背景。你也应该尝试不使用@styleClass。
-
我呆了 3 天，检查了 .css 类和面板的背景等等。但事实并非如此，因为我尝试了例如从 chrome 保存输出并使用 IE11 打开它。但问题仍然存在，有点奇怪。我会尝试删除@styleClass。
-
啊顺便谢谢你的回复:)
-
我的意思是在浏览器中检查代码，在IE中应该是F12。在那里你可以看到浏览器使用的实际样式是什么。
-
是的，我理解你。不幸的是，删除 @styleclass 没有用。我会继续检查，也许我会弄清楚。
标签： internet-explorer richfaces internet-explorer-11