CSS 选项卡重叠
以下 HTML 代码使用了 http://css-tricks.com/examples 上给出的示例 6 中的示例/CSSTabs/
<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 类中的 min-height。 但在我的应用程序中，选项卡内容是实时生成的（从某些网络服务），并且我不知道它们的大小。
注：该代码仅适用于非IE浏览器
the following HTML code has a sample used from example 6 given on http://css-tricks.com/examples/CSSTabs/
<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>
The problem is, when there's lot of text in any tab, it's end part is not hidden when you switch to another tab.
For example, in the code given above - the end contents of Tab1 can be seen even when you switch to other tabs.
In another worse case, if more tabs have lot of text - then the contents overlap.
How can this be solved?
One way to solve this is to increase min-height in the tabview class.
But in my application the tab contents are generated in real-time (from some web service), and I don't have idea about their size.
Note: The code works only in non-IE browser
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
只需添加
即可解决这两个问题。结束文本不再可见，即使有很多内容，它也不会重叠。
小提琴
Just add
Solves both the problems. The end text is no longer visible and even with a lot of content, it does not overlap.
Fiddle
如果您在实际网站上使用它，您肯定不想使用这种纯 CSS 解决方案。除了它在 IE 中无法正常工作这一事实之外，当您切换选项卡时页面会移动这一事实确实会让您的访问者感到厌烦。
如果您想尝试在 IE 中实现此功能，则必须依赖 Javascript 解决方案。如果您已经依赖 Javascript 解决方案来修复选项卡，那么您不妨使用 javascript 来为您的选项卡提供支持。
请查看 jQuery UI 选项卡。一个更好的解决方案。
If you're using this on an actual website, you definitely don't want to use this pure CSS solution. Beyond the fact that it won't work properly in IE, the fact that your page moves when you switch tabs is really going to be a turnoff to your visitors.
If you were to try and make this work in IE, you'd have to rely on a Javascript solution. If you're already relying on a Javascript solution to fix the tabs, you might as well use javascript to power your tabs.
Please, check out jQuery UI Tabs. A much, much better solution.