Question

在Stack Overflow的用户页面上，选项卡是（Stats，Recent，Responses等），您会发现这些选项卡是他们所在行的扩展名。 Stack Overflow通过定义纯CSS边框来创建此效果。我希望达到相同的效果，但我有标签和他们所坐的线的图像。

我有一个带圆角的盒子（白色背景，灰色轮廓）。标签位于顶部，颜色相同。标签有圆角顶角，没有底边。标签位于框的div之前的div中。

为了达到上述效果，我想这个标签必须下来并覆盖它们相遇的盒子边框的那一部分。我在Firefox中完成了这个，但在IE中你仍然可以看到盒子边框的行。

如何在两种浏览器中调整此项？

这是我在FF中工作但不在IE中的示例：http://www.mcrackan.com/recipes/csstest-loggedin.htm

[修改：固定网址]

Answer 1

可能sliding doors technique可以派上用场

此example适用于Firefox和IE

Answer 2

我之前做过类似的事情，给“主动”标签类一个负底部位置，从而移动它使它位于框架边框的顶部。也许是解决方案？例如：

<style>
ul.tabs {
border-bottom: 1px solid blue;
height: 20px;
margin: 0;
padding: 0;
list-style-type: none;
}
    ul.tabs li {
    float: left;
    position: relative;
    bottom: 5px;
    margin: 0;
    padding: 0;
    }
        ul.tabs li img {
        float: left;
        height: 20px;
        width: 50px;
        border: none;
        }
    ul.tabs li.selected {
    bottom: -1px;
    }
</style>

<ul class="tabs">
    <li><a href=""><img src="tab1.gif" /></a></li>
    <li class="selected"><a href=""><img src="tab2.gif" /></a></li>
    <li><a href=""><img src="tab3.gif" /></a></li>
</ul>

Answer 3

虽然我已经开始自己动手了，但是当我第一次搞清楚CSS标签时，其中一个最能帮助我的例子是：

http://unraveled.com/projects/css_tabs/

这种相对定位的方法通常最适合我。

祝你好运！

Answer 4

这tab generator可能会有所帮助。

使用图像的CSS无边框标签

4 个答案: