javascript - JQuery UI 选项卡未正确显示 - Internet Explorer

Question

我正在尝试开始使用 Jquery UI 选项卡，但我在他们网站上的演示中遇到了问题。它在网站上运行良好，但当我下载源代码和所有其他文件以在我的机器上运行它时，它最初正确呈现如下: 但是当我点击任何其他选项卡时，它们呈现如下:

单击最左边的选项卡总是让事情看起来正确，但单击其他​​选项卡导致我圈出的行不被渲染。它在 Firefox 和 Chrome 中对我来说很好用。有没有其他人以前见过这样的事情？

如果能给我一些建议，我将不胜感激。

谢谢，
-马克

Answer 1

我发现了问题。它在 JQueryUI CSS 中。它像这样定义 .ui-tabs .ui-tabs-nav li 元素:

.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }

应该是什么时候

.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em -1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }

即对于 margin

，1px 应该是 -1px