css - Grails - 未应用 CSS 规则

Question

我正在开发一个 Grails 应用程序，但我遇到了应用于 View 的 CSS 规则的问题。考虑这个 GSP 代码:

<div id="radio" style="height: 30px">
    <div class="fieldcontain">
        <label style="float: left; width: 25%; overflow: hidden">
            <g:message code="recepcionDeComplejoInstance.tipoDeMineral.label" default="Tipo De Mineral" />

        </label>
    </div>

    <div class="ui-button" style="float: left; width: 75%; overflow: hidden; text-align: start">
        <input type="radio" id="radioComplejo" value="complejo" name="radio" checked="checked"><label for="radioComplejo">COMPLEJO</label>
        <input type="radio" id="radioPlomoPlata" value="plomoPlata" name="radio"><label for="radioPlomoPlata">PB-AG</label>
        <input type="radio" id="radioZincPlata"  value="zincPlata" name="radio"><label for="radioZincPlata">ZN-AG</label>
        <input type="radio" id="radioCobrePlata" value="cobrePlata" name="radio"><label for="radioCobrePlata">CU-AG</label>
    </div>
</div>

<div id="radio2" style="height: 30px">
    <div class="fieldcontain">
        <label style="float: left; width: 25%; overflow: hidden">
            <g:message code="recepcionDeComplejoInstance.naturalezaMineral.label" default="Naturaleza Mineral" />

        </label>
    </div>

    <div class="ui-button" style="float: left; width: 50%; overflow: hidden; text-align: start">
        <input type="radio" id="radioSulfuro" value="sulfuro" name="radio2" checked="checked"><label for="radioSulfuro">SULFURO</label>
        <input type="radio" id="radioOxido" value="oxido" name="radio2"><label for="radioOxido">OXIDO</label>
    </div>
</div>

这是结果:

View 中使用了两个 CSS 类:

1. fieldcontain，这是 Grails 提供的默认 CSS。
2. ui-button,在JQuery UI Lightness文件中声明(jquery-ui-1.10.3.custom.css)

如您所见，Naturaleza Mineral 单选按钮没有 Tipo De Mineral 单选按钮的外观，因为两者都应用了相同的 CSS 规则单选按钮组。

为什么会这样？

Answer 1

这是因为您通过调用 buttonset() 从 javascript 启用了 jquery-ui 单选按钮样式:

$( "#radio, #radio2" ).buttonset();

关注这个笨蛋 example .