Question

检查/取消选中Internet Explorer 8下的复选框时出现问题。

当我选中一个复选框时，它会“垂直移动”，然后当我取消选中它时，它会返回到原始位置。我尝试用边距和垂直对齐来解决它，但没有运气。

代码在Firefox和Chrome中完美运行。

页：

<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition template="../templates/ui-test.xhtml"
  xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core"
  xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
  xmlns:nttdata="http://nttdata.com/facelets" lang="it-IT">

  <ui:define name="title">Test Checkbox</ui:define>

  <ui:define name="head"></ui:define>

  <ui:define name="navbar"></ui:define>

  <ui:define name="content">
    <div id="contentCc">
      <h:outputText value="Selection: " />
      <p:selectBooleanCheckbox value="#{testViewBean.selectedValue}" />
    </div>
  </ui:define>
</ui:composition>

模板：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core" 
  xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" 
  xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" 
  lang="it-IT">

  <f:view contentType="text/html" locale="it_IT">

  <h:head>
    <f:facet name="first">
      <meta http-equiv="X-UA-Compatible" content="IE=8" />
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv='Cache-control' content='no-cache, no-store, must-revalidate' />
      <meta http-equiv='Expires' content='0' />
      <meta http-equiv='Pragma' content='no-cache' />
      <title>
        <ui:insert name="title">Default title</ui:insert>
      </title>
    </f:facet>

    <ui:insert name="head"></ui:insert>
  </h:head>

  <h:body>
    <div id="outer">
      <div id="header" class="ui-widget ui-widget-header ui-corner-all">
        <ui:insert name="navbar">
          <ui:include 
            src="#{pageContext.request.contextPath}/components/navbar/navbar.xhtml" />
        </ui:insert>
      </div> <!-- header -->

      <div id="content">
        <ui:insert name="content">Default Content</ui:insert>
      </div>
      <div id="footer">
        <!--ui:insert name="footer"></ui:insert-->
      </div>
  </div> <!-- outer -->
  </h:body>
</f:view>
</html>

生成的XHTML代码有效（使用validator.w3.org验证），但在ie8下，单击时输入元素“dance”。以下是ie8下的已选中和未选中复选框的图像：

https://dl.dropboxusercontent.com/u/7865852/ie8_checkbox_unchecked.png https://dl.dropboxusercontent.com/u/7865852/ie8_checkbox_checked.png

使用 h ：selectBooleanCheckbox而不是 p ：selectBooleanCheckbox在ie8下工作，但我丢失了所有（框架默认）应用的css样式。

Answer 1

我有同样的问题，但是所有的浏览器（primefaces 5.1）我用复选框元素上的css修复了它

ccat

Primefaces跨浏览器的复选框一致性

1 个答案: