Question

以下HTML代码包含http://css-tricks.com/examples/CSSTabs/

上给出的示例6中使用的示例

<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浏览器

Answer 1

添加

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

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

Fiddle

Answer 2

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

如果您尝试在IE中进行此项工作，则必须依赖Javascript解决方案。如果您已经依赖Javascript解决方案来修复标签，那么您也可以使用javascript来为标签提供支持。

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

CSS标签重叠

2 个答案: