0

現在、jquery-ui タブの CSS レイアウトに苦労しています。私は 2 つの CSS を使用しています。これは、最初にまとめた最初の CSS で、タブの目的の外観を取得します (画像 2 を参照)。jquery-ui-1.8rc2.custom.css という名前の 2 番目の css は、Web ページで使用しているアラート ダイアログ ボックス用に追加されました。両方のCSSを使用すると、タブが不均衡になります（画像2を見てください）。

現在取り組んでいるこのCSSの問題を回避/バイパス/解決するにはどうすればよいですか?

私が欲しいタブCSSの見通し： ここに画像の説明を入力

jquery-ui-1.8rc2.custom.css によって歪んだタブ CSS の外観: ここに画像の説明を入力

jquery-ui-1.8rc2.custom.css を使用する私のサイトの警告ボックス:

ここに画像の説明を入力

編集：

これは私のtabs.cssです

<style>

#page-wrap                          { width: 615px; background:#FFF; margin: 10px auto; margin: 0; padding: 0;  }



.ui-tabs                            { zoom: 1;}
.ui-tabs .ui-tabs-nav               { list-style: none; position: relative; overflow:hidden;
                                       z-index: 1000; background: #EBEBEB; margin: 0; padding: 0;}


.ui-tabs .ui-tabs-nav li            { position: relative; float: left; 
                                      border-bottom-width: 0 !important;  margin: 0 0px -1px 0;  background: #EBEBEB;}
.ui-tabs .ui-tabs-nav li a          { float: left; text-decoration: none; padding: 5px 10px ;  outline: medium none; font-weight: bold; font-size:11px; line-height: 
30px;}
.ui-tabs .ui-tabs-nav 
li.ui-tabs-selected                 { border-bottom-width: 0; background: #F9AE5C;   border-top:1px solid #D4D4D4; border-left:1px solid #D4D4D4; border-right:1px solid #D4D4D4; border-bottom:1px solid #FFF; }
.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; color: #222222; } /* 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             { padding: 20px; display: block; border-width: 0;  background: none; 
                                       position: relative; min-height: 100px;  border: 1px solid #D4D4D4;  }
.ui-tabs .ui-tabs-hide              { display: none !important; margin: 0; padding: 0;}
.pngIcon{ padding:0px 5px 0px 5px; vertical-align:bottom;}


a.mover                             { background: #900; padding: 6px 12px; position: absolute;
                                      color: white; font-weight: bold; text-decoration: none; }
.next-tab                           { bottom: 0; right: 0; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; }
.prev-tab                           { bottom: 0; left: 0; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px; }
</style>

jquery-ui-1.8rc2.custom.css に関しては、ここにリンクがあります

4

1 に答える 1

1

.custom.css が .css ルールを上書きしている場合、head セクションで .custom.css スタイルシートを 2 番目に呼び出していると思います。最初に custom.css を呼び出し、2 番目に自分のものを呼び出します。後で .css ファイルを呼び出すと、スタイルシート間で重複するルールが上書きされます。複数のスタイルシートに関連する「特異性」を調査します。

于 2012-07-09T23:14:32.367 に答える