0

我正在做一个按钮组，这是正常的，照片

所以，在应用了一些 UI 样式之后，我得到了按钮样式，但是请检查下一张图片……一个奇怪的按钮点出现在左侧。（如果我点击它，按钮集会激活按钮 #3）

我不得不说这个奇怪的小按钮只出现在 Chrome 中，如果我使用 IE 浏览它，它是 100% 没问题的。

按钮集的代码非常简单，

//JS

$(document).ready(function () {
        $("#radio").buttonset();
    });

//HTML

<div id="radio" align="center">
    <input type="radio" id="radio1" runat="server" value="BtnNextCaseClick" name="radio" checked="true"/><label for="radio1" style="width: 109px; margin-right:-.9em">Siguiente Caso</label>
    <input type="radio" id="radio2" runat="server" value="CloseCaseAndBandeja" name="radio" /><label for="radio2" style="margin-right:-.9em">Terminar Caso y Cerrar Bandeja</label>
    <input type="radio" id="radio3" runat="server" value="CloseBandeja" name="radio"/><label for="radio3" style="width: 109px">Cerrar Bandeja</label>
</div>

关于如何消除该样式错误的任何想法？

4

1 回答 1

1

尝试这个

#radio .ui-helper-hidden-accessible { display: none; }

解释

我在我的项目中观察到 buttonset() 工作原理的一部分是它在基础无线电输入上设置了“ui-helper-hidden-accessible”类，然后应该会导致无线电输入按照样式隐藏在 jQuery UI CSS 样式表中为 'ui-helper-hidden-accessible' 定义。

但是，IMO，正如您的 Chrome 案例和我的 IE 案例所证明的那样，在我看来，“ui-helper-hidden-accessible”的 jQuery UI CSS 样式不足以在所有情况下隐藏无线电输入. 所以我的回答是将这个简短的 jQuery UI hack 添加到项目的样式表中并完成它。毕竟，我们确实希望隐藏真正的无线电输入，因为我们需要按钮。毕竟，我们确实希望无线电输入仍然存在，因为这就是一切在幕后工作的方式——按钮集只是前端的一个层。

hack 样式在针对 ui-helper-hidden-accessible 类之前针对 buttonset 容器（在您的情况下是 #radio），以便将 hack 的应用限制在我们知道它是必要且有效的地方——即所以它不会破坏您网站的其他部分、其他 jQuery UI 组件等。

请注意，您没有提及您的 jQuery UI 版本，因此我不能 100% 确定您的情况。我在 jQuery UI 1.8.17 上开发了这个 hack，它将 ui-helper-hidden-accessible 定义为

.ui-helper-hidden-accessible 
{ 
    position: absolute !important;  
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px); 
}
于 2012-11-07T19:44:36.043 回答