使用Firefox中的JQuery UI在选项卡下进行差距

Question

我一直在为我的网站的各个方面使用JQueryUI,并且一个小的选项卡式菜单集运行良好,除了在Firefox中.下图显示了在Firefox上面呈现的相同代码,以及下面的IE9.注意选项卡下的间隙和选项卡内填充(可能？)的增加.我已从网站(第二张图片)中删除了所有样式表,只留下了基本的JQuery UI,但差距仍然存在,并且只在firefox中出现.

js调用是基本的,它可以是:

    $("#menuTabs").tabs();

我不常显示IE浏览器比firefox更好的问题...删除了我生成的所有CSS,并确保没有应用任何样式,我不知道下一步要去哪里看看!

如果你能提出任何可能导致它的建议,我会很开心!

[编辑]在尽可能缩小代码并仅使用"已知良好"库之后,事实证明它是由于它在表格单元格中引起的!

这里有一些你可以玩的代码!http://jsfiddle.net/XVHTk/ 但是当检查"Normalized CSS"时它确实有效,所以它可能是从单元格继承的填充吗？

[编辑#2]

对.

所以.

事实证明,应用于表格以移除填充和边距以及边框等的CSS样式是不够的.您必须在表定义中包含cellpadding ="0"和cellspacing ="0",否则jQuery选项卡会在它们周围添加一些额外的填充.

奇.

jsFiddle with table and no extras:http://jsfiddle.net/XVHTk/1/

jsFiddle与表间距/填充剥离:http://jsfiddle.net/XVHTk/2/

为什么HTML单元格属性被转移到选项卡中,我不知道.我很乐意修复它!

Answer 1

这是由类中的错误引起的ui-helper-clearfix。请参阅票证 #8442和相关修复。正如您从票证中看到的，该问题已在 1.10.1 中修复。我创建了一个小提琴，显示它可以在 1.10.1 中正常工作，并使用 1.8.x 和附加 CSS 来解决该问题。后者表明，如果您现在无法升级到 1.10.1+，则只需包含以下 CSS：

.ui-helper-clearfix:after {
    border-collapse: collapse;
}