我正在使用bootstrap升级旧版JSF Web应用程序的外观。该应用程序使用JSF 2.1.7和primefaces 3.5构建。我在Chrome中如何显示单选按钮时遇到问题。
选定的单选按钮总是跳得更高,未选中的按钮会像海浪一样下降。屏幕截图如下。这个问题在Firefox中并不会发生。
如何阻止此行为?
JSF代码段
<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=" "></h:outputText>
<h:outputLabel for="addrButton" value="Address" style="font-size:small;
font-weight:bolder;"/>
<h:outputText
value="         
  ">
</h:outputText>
<p:radioButton id="zipButton" for="zipOrAddress" itemIndex="1"/>
<h:outputText value=" "></h:outputText>
<h:outputLabel for="zipButton" value="ZipCode" style="font-size:small;
font-weight:bolder;"/>
</ui:fragment>
呈现的HTML:
<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>
<label for="mainForm:addrButton" style="font-size:small;
font-weight:bolder;">Address</label>
<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>
<label for="mainForm:zipButton" style="font-size:small;
font-weight:bolder;">ZipCode</label>
</td>
非常感谢您提供的任何帮助。