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

CSS标签重叠

回答

相关问题