CSS 选项卡重叠答案

【问题标题】：CSS tabs overlappingCSS 选项卡重叠
【发布时间】：2011-06-09 14:11:20
【问题描述】：

下面的 HTML 代码中的示例 6 使用了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>

问题是，当任何标签中有很多文本时，当您切换到另一个标签时，它的结尾部分并没有隐藏。

例如，在上面给出的代码中，即使切换到其他选项卡，也可以看到 Tab1 的结束内容。

在另一种更糟糕的情况下，如果更多选项卡包含大量文本 - 则内容重叠。

如何解决？

解决这个问题的一种方法是在 tabview 类中增加 min-height。但在我的应用程序中，选项卡内容是实时生成的（来自某些网络服务），我不知道它们的大小。

注意：该代码仅适用于非IE浏览器

【问题讨论】：

标签： tabs positioning z-index css

【解决方案1】：

只需添加

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

解决了这两个问题。结束文本不再可见，即使内容很多，也不会重叠。

Fiddle

【讨论】：

为什么它只能在非 IE 浏览器中工作。在 IE9 上工作？
嗨 Jawad，添加 overflow:auto 在右侧添加一个滚动条，无法滚动（在 Firefox4 中）可能是因为之前定义的 CSS 属性。是否可以根据内容大小扩展选项卡高度，或者将所有选项卡的最大尺寸作为标准？
由于选择器“.tabview > div:not(:target) > div”，它无法在 IE8 及更低版本中工作。只需使用 IE8 及更低版本支持的另一个选择器。滚动条在 FF4.0.1 中不起作用，因为你有“z-index：-2”。只需删除它，它也可以在 FF 中使用
你只是有一个你不需要的过于复杂的选择器的情况，因为你可以轻松地使用现代和旧浏览器都支持的简单选择器来实现相同的目标。
通过输入 overflow: auto; 得到解决方案如答案和高度中给出的：tabview 类为 100%。现在，父元素占据整个屏幕空间，子元素在父元素内，滚动条以防溢出。

【解决方案2】：

如果您在实际网站上使用它，您肯定不想使用这种纯 CSS 解决方案。除了它在 IE 中无法正常工作之外，当您切换标签页时页面会移动这一事实确实会让您的访问者感到厌烦。

如果您要尝试在 IE 中完成这项工作，则必须依赖 Javascript 解决方案。如果您已经依赖 Javascript 解决方案来修复选项卡，那么您不妨使用 javascript 来为您的选项卡供电。

请查看jQuery UI Tabs。一个更好的解决方案。

【讨论】：

这能回答你的问题吗？
当前 HTML 页面没有任何标签，因此用户必须滚动浏览它。这就是为什么，我想通过对代码进行最少的更改来提供选项卡功能。这是迄今为止我发现的最干净的解决方案。
但是如果很难编辑这个，我可能不得不切换到使用 javascript 的解决方案。
试一试 Tabs 脚本 - 它的额外代码比您想象的要少得多。它与您所拥有的唯一不同之处在于将选项卡的标题与内容分开。