0

我有一个用于显示服务器库存信息的 ASP.net 页面,并使用 JQuery UI 将信息分成选项卡,如下所示:

<div id="tabs" style="z-index: auto; width: 100%;">
     <ul>
         <li><a href="#tabs-1">Summary</a></li>
         <li><a href="#tabs-11">Audit</a></li>
         <li><a href="#tabs-3">Sessions/Security</a></li>
         <li><a href="#tabs-4">Programs/Services</a></li>
         <li><a href="#tabs-5">Processor</a></li>
         <li><a href="#tabs-6">Memory</a></li>
         <li><a href="#tabs-7">Storage</a></li>
         <li><a href="#tabs-9">Roles/Tasks</a></li>
         <li><a href="#tabs-13">Ascertain</a></li>
         <li><a href="#tabs-10">Charts</a></li>
     </ul>
 <div id="tabs-1" style="height: 100%; background-color: #F8FAFA;">
 .......
 .......
 ...other code for stuff in tabs......

这工作得相当好,并产生一个选项卡式窗格,当窗口出现时会展开:

图片1

我遇到的问题是当用户选择第一行中的选项卡时,最右边(上图中的角色/任务)我将得到以下结果:

图片2

我似乎无法弄清楚为什么标签会以这种方式倾斜。我已经在 Chrome 和 IE 9 中对此进行了测试,结果相同。无论窗口大小以及哪个选项卡最右侧,都会发生这种情况:

图3

编辑:我没有发布完整的代码,包括关闭 DIV,因为标记是几千行,我不想全部筛选。实际代码是完整的。

编辑 2:这是用于选项卡的 CSS。我使用 JQUERY UI 自定义主题页面生成的内容。

.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.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 a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a,     .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
4

2 回答 2

0

我能够通过将我的 JQUERY 库从版本 1.8.162 更新到 1.10.0 来解决这个问题。这一定是他们在升级中处理的事情。

于 2013-01-18T20:25:44.210 回答
-1

只是在黑暗中刺伤,但看起来你在某处有一个未封闭的 DIV。

于 2013-01-08T22:35:17.017 回答