css - Jquery UI 单选按钮无缘无故分开

Question

这是一个 live demo of the issue在 JS fiddle 上。我有一些 jquery UI 单选按钮，通过在 body 元素上设置字体系列，按钮集之间突然出现空格，破坏了按钮的外观和连接性。它们看起来像这样:

更新:该错误现在出现在所有浏览器中，尽管每个浏览器略有不同。在所有情况下，字体系列属性都是问题所在。

我从我的网站中加入了一些导致问题的最小 CSS/HTML，即我网站的 Themeroller CSS。你可以弄乱 fiddle ，当从 body 标签中删除 font-family 标签时，你会看到间隙消失了。请注意，它不一定是 body 标记，如果您将它设为 div 或适用于单选按钮的任何其他内容，它就会发生。

这一点 CSS 足以打破它:

body{
font-family: Verdana, Helvetica, Arial, sans-serif;
}

有什么方法可以在不破坏 jquery UI 按钮的情况下为父元素指定字体系列？有趣的是，这个字体系列没有被使用，因为 Jquery UI 主题的 CSS 也设置了单选按钮的字体。

Answer 1

我无法告诉你它为什么会这样，但如果你只是想添加 CSS 代码来修复它，那么使用这个:

#radio input, #radio label {
    float: left;
    margin-right: 0px;  
}

编辑

作为对您下面评论的回应 - 尝试将 !important 添加到 margin-right；看起来它被超越了。

#radio input, #radio label {
    float: left;
    margin-right: 0px !important;  
}

JS fiddle - http://jsfiddle.net/kwpGn/7/