Jquery UI 单选按钮无缘无故地分离

Question

这是 JS Fiddle 上的该问题的现场演示。我有一些 jquery UI 单选按钮，通过在 body 元素上设置字体系列，按钮集之间突然出现空格，破坏了按钮的外观和连接性。它们看起来像这样：

更新：该错误现在在所有浏览器中都会发生，尽管在每个浏览器。在所有情况下，font-family 属性都是问题所在。

我在我的网站中添加了一些导致问题的最小 CSS/HTML，即我网站的 Themeroller CSS。您可以摆弄小提琴，当从 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 添加到 右边距;看起来它正在被超越。

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

JS 小提琴 - http://jsfiddle.net/kwpGn/7/