Twitter bootstrap 选中时,JSF2/Primefaces单选按钮在Chrome中移动

Twitter bootstrap 选中时,JSF2/Primefaces单选按钮在Chrome中移动,twitter-bootstrap,google-chrome,primefaces,jsf-2,radio-button,Twitter Bootstrap,Google Chrome,Primefaces,Jsf 2,Radio Button,我正在使用bootstrap升级遗留JSF web应用程序的外观。该应用程序是使用JSF2.1.7和primefaces 3.5构建的。我对Chrome中单选按钮的显示方式有问题 选中的单选按钮总是跳得更高,而未选中的单选按钮则像海锯一样下降。屏幕截图包括在下面。这个问题在Firefox中没有发生 我怎样才能阻止这种行为 JSF代码片段: 呈现的html: 地址 ZipCode 如果您能提供任何帮助,我们将不胜感激 <ui:fragment rendered="true">

我正在使用bootstrap升级遗留JSF web应用程序的外观。该应用程序是使用JSF2.1.7和primefaces 3.5构建的。我对Chrome中单选按钮的显示方式有问题

选中的单选按钮总是跳得更高,而未选中的单选按钮则像海锯一样下降。屏幕截图包括在下面。这个问题在Firefox中没有发生

我怎样才能阻止这种行为

JSF代码片段:


呈现的html:


地址
ZipCode
如果您能提供任何帮助,我们将不胜感激

<ui:fragment rendered="true">
  <p:selectOneRadio id="zipOrAddress"
                 value="#{getDetails.zipPicked}"
                  required="true" layout="custom">
    <f:selectItem itemValue="false" />
    <f:selectItem itemValue="true" />

    <p:ajax event="change"
        process="@this"
        update="addressFields">
    </p:ajax>
  </p:selectOneRadio>

  <p:radioButton id="addrButton" for="zipOrAddress" itemIndex="0" />
  <h:outputText value="&#160;"></h:outputText>
  <h:outputLabel for="addrButton" value="Address" style="font-size:small;
   font-weight:bolder;"/>

  <h:outputText   
   value="&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
   &#160;&#160;"> 
  </h:outputText>

  <p:radioButton id="zipButton" for="zipOrAddress" itemIndex="1"/>
  <h:outputText value="&#160;"></h:outputText>
  <h:outputLabel for="zipButton" value="ZipCode" style="font-size:small;
   font-weight:bolder;"/>

</ui:fragment>
<td class=" content-column">
  <span id="mainForm:zipOrAddress"></span>
  <div id="mainForm:addrButton" class="ui-radiobutton ui-widget">
    <div class="ui-helper-hidden-accessible">
        <input id="mainForm:zipOrAddress:0" name="mainForm:zipOrAddress" 
          type="radio" value="false">
    </div>
    <div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-
      default">
      <span class="ui-radiobutton-icon"></span>
    </div>
  </div>
  &nbsp;
  <label for="mainForm:addrButton" style="font-size:small;
   font-weight:bolder;">Address</label>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <div id="mainForm:zipButton" class="ui-radiobutton ui-widget">
    <div class="ui-helper-hidden-accessible">
      <input id="mainForm:zipOrAddress:1" name="mainForm:zipOrAddress" 
        type="radio" value="true" checked="checked">
    </div>
    <div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-
     default ui-state-active">
      <span class="ui-radiobutton-icon ui-icon ui-icon-bullet"></span>
    </div>
  </div>
  &nbsp;
  <label for="mainForm:zipButton" style="font-size:small;
  font-weight:bolder;">ZipCode</label>
</td>