CSS標籤重疊

下面的HTML代碼已經從例如6 http://css-tricks.com/examples/CSSTabs/CSS標籤重疊

<head> 
    <style type="text/css"> 
     .tabview { min-height: 250px; position: relative; width: 100%; } 
     .tabview > div { display: inline; } 
     .tabview > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: black; background: white; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; } 
     .tabview > div:not(:target) > a { border-bottom: 0; background: -moz-linear-gradient(top, white, #eee); } 
     .tabview > div:target > a { background: white; }  
     .tabview > div > div { background: white; z-index: -2; left: 0; top: 30px; bottom: 0; right: 0; padding: 20px; border: 1px solid #ccc; }  
     .tabview > div:not(:target) > div { position: absolute } 
     .tabview > div:target > div { position: absolute; z-index: -1; } 
    </style> 
</head> 
<body> 
    <div class="tabview"> 
     <div id="tab1"> 
      <a href="#tab1">Tab 1</a> 
      <div>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </div> 
     </div> 
     <div id="tab2"> 
      <a href="#tab2">Tab 2</a> 
      <div>2. One might well argue, that...</div> 
     </div> 
     <div id="tab3"> 
      <a href="#tab3">Tab 3</a> 
      <div>3. One might well argue, that...</div> 
     </div> 
    </div> 
</body>

給出用到的樣品的問題是，當有很多的任何標籤的文字，這是當你切換到端部不隱藏另一個標籤。

例如，在上面給出的代碼中 - 即使切換到其他選項卡，也可以看到Tab1的結束內容。

在另一個更糟糕的情況下，如果更多標籤有很多文字 - 則內容重疊。

這怎麼解決？

解決此問題的一種方法是增加tabview類中的最小高度。但在我的應用程序中，標籤內容是實時生成的（來自某些Web服務），我不知道它們的大小。

注：該代碼只能在非IE瀏覽器

來源

2011-06-09 Trivikram

只需添加

.tabview > div > div 
{ 
overflow: auto; 
}

解決這兩個問題。結束文本不再可見，即使有很多內容，它也不會重疊。

Fiddle

來源

2011-06-09 05:55:00 Jawad

爲什麼它只能在非IE瀏覽器中工作。適用於IE9嗎？ – Jawad 2011-06-09 05:58:40

我檢查了IE8，它不起作用 – Trivikram 2011-06-09 06:29:46

嗨Jawad，添加溢出：auto在右側添加一個滾動條，無法滾動（在Firefox4中）可能是因爲之前定義的CSS屬性。是否可以根據內容大小來擴展選項卡高度，或者將所有選項卡的最大大小作爲標準？ – Trivikram 2011-06-09 06:31:33

如果您在使用本上的實際的網站，你肯定不想用這個純CSS的解決方案。除了在IE中無法正常工作的事實，切換標籤頁時頁面移動的事實實際上將會對訪問者產生影響。

如果你想在IE中使用這個工具，你必須要依賴Javascript解決方案。如果您已經依賴Javascript解決方案來修復這些標籤，那麼您不妨使用JavaScript來爲您的標籤加電。請致電jQuery UI Tabs。更好的解決方案。

來源

2011-06-09 05:34:07 Wex

WEX您好，感謝答案 – Trivikram 2011-06-09 05:38:53

是否回答你的問題？ – Wex 2011-06-09 05:40:14

當前HTML頁面沒有任何選項卡，因此用戶必須滾動瀏覽它。這就是爲什麼，我想通過對代碼進行最小限度的更改來提供選項卡功能。這是我迄今發現的最乾淨的解決方案。 – Trivikram 2011-06-09 05:40:45

回答

相關問題