5

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

js 调用尽可能基本：

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

在 IE 比 firefox 更好的情况下，我并不经常遇到显示问题......删除了我生成的所有 CSS，并确保没有应用任何样式，我不知道下一步该往哪里看！

如果您可以就可能导致它的原因提供任何建议，我会很高兴！

IE 和 Firefox 呈现相同的菜单 IE 和 Firefox 渲染没有我的样式表

[编辑] 在尽可能地缩减代码并仅使用“已知良好”库后，事实证明这是由于它位于表格单元格中！

这里有一些你可以玩的代码！http://jsfiddle.net/XVHTk/ 但是，当检查“规范化 CSS”时它确实有效，所以它可能是从单元格继承的填充？

[编辑#2]

正确的。

所以。

事实证明，将 CSS 样式应用于表格以删除填充、边距和边框等是不够的。您必须在表定义中包含 cellpadding="0" 和 cellspacing="0" 否则 jQuery 选项卡周围有一些额外的填充。

奇怪的。

带表格的 jsFiddle，没有其他功能：http: //jsfiddle.net/XVHTk/1/

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

为什么将 HTML 单元格属性转移到选项卡中，我不知道。我很高兴能修复它！

4

1 回答 1

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;
}
于 2013-04-10T21:08:44.167 回答