JSF selectCheckBoxMenu在IE中无法正常工作

Question

我在IE上运行时遇到了jsf应用程序的问题。

jsf上的selectcheckboxmenu行为有问题，并且菜单项的复选框位于项目下方，复选框仍然存在。以下是我所面临的截图：

[IMG] http://i43.tinypic.com/8yb976.jpg[/IMG]

selectcheckboxmenu的代码如下：

<p:selectCheckboxMenu value="#{formBean.selectedMovies}" label="Movies"
    filter="true" filterText="Filter" filterMatchMode="startsWith"
    panelStyle="width:220px">
    <f:selectItems value="#{formBean.movies}" />
</p:selectCheckboxMenu>

请告诉我哪里出错了，问题是什么。 提前谢谢。

Answer 1

IE存在兼容性问题。 Primefaces在IE9兼容性方面运行良好。 由于这个原因，您的复选框无效。

我经历过同样的问题。因此，您必须使用jsf

的生命周期来设置兼容性视图

public class UACompatibleHeaderPhaseListener implements PhaseListener {
@Override
public void afterPhase(PhaseEvent arg0){}

@Override
public void beforePhase(PhaseEvent event){
    final FacesContext facesContext = event.getFacesContext();
    final HttpServletResponse response = (HttpServletResponse) facesContext.getExternalContext().getResponse();
    response.addHeader("X-UA-Compatible", "IE=edge");
}

@Override
public PhaseId getPhaseId() {
     return PhaseId.RENDER_RESPONSE;
}
}

在你的Faces-config.xml中，只需将类包含在packagename

中

<lifecycle>
   <phase-listener>
     com.jsf.listener.UACompatibleHeaderPhaseListener
   </phase-listener>
</lifecycle>

Answer 2

我用css属性'vertical-align'修复它，

div.ui-selectcheckboxmenu.ui-widget{
width: 100% !important;
}
div.ui-widget-header.ui-corner-all.ui-selectcheckboxmenu-header.ui-helper-clearfix{
padding: 3px !important;

}
input.ui-inputfield.ui-inputtext.ui-widget.ui-state-default.ui-corner-all{

width: 90% !important;

}
div.ui-chkbox-box.ui-widget.ui-corner-all{
vertical-align: top !important;
margin-top: 3px !important;
}
div.ui-selectcheckboxmenu-filter-container{
width:75% !important;
vertical-align: top !important;
margin-left: 2px !important;
}

测试了firefox，chrome和ie9。