サーバー インベントリ情報を表示するために使用される 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......
これはかなりうまく機能しており、ウィンドウが展開するときに展開するタブ付きペインが生成されます。
私が直面している問題は、ユーザーが最初の行の一番右にあるタブ (上の図のロール/タスク) を選択すると、次の結果が得られることです。
タブがこのように歪んでいる理由がわかりません。Chrome と IE 9 の両方でこれをテストしましたが、結果は同じでした。これは、ウィンドウのサイズや右端にあるタブに関係なく発生します。
編集：マークアップが数千行あり、すべてをふるいにかけたくなかったため、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; }