由图像组成的动态调整大小选项卡答案

【问题标题】：Dynamically sizing tab made of images由图像组成的动态调整大小选项卡
【发布时间】：2010-09-15 14:32:46
【问题描述】：

我正在尝试向我的网页添加一个如下所示的标签：

使用this example 作为基础，我已经部分工作了。我的情况不同，因为我希望文本部分是固定的，但尾部部分可以动态调整大小以占用选项卡容器的其余部分。

它在 IE 6 中看起来不错，但并没有真正占据容器的整个宽度。在 Firefox 3 中，它根本无法很好地渲染：（红色是跨度之间的空白区域）。

如何让它在 IE6 和 Firefox 中正确呈现以占用为#Tab 指定的整个宽度？ #Tab4 是我想调整大小以占用尽可能多的空间的区域。

    <style type="text/css">
    #Tab
    {
        width: 300px;
    }

    #Tab1
    {
        background: #000 url(BlueTabSprite.png) no-repeat 0 -136px;
        display: inline-block;
        height: 23px;
        padding-left: 4px;
    }

    #Tab2
    {
        background: #000 url(BlueTabSprite.png) repeat-x 0 -242px;
        display: inline-block;
        overflow: hidden;
        padding-top: 4px;
        height: 19px;
        width: 100px;
    }

    #Tab3
    {
        background: #000 url(BlueTabSprite.png) no-repeat right -30px;
        display: inline-block;
        height: 23px;
        padding-right: 6px;
    }

    #Tab4
    {
        background: #000 url(BlueTabSprite.png) repeat-x 0 -83px;
        display: inline-block;
        height: 23px;
        width:60%
    }

    #Tab5
    {
        background: #000 url(BlueTabSprite.png) no-repeat right -189px;
        display: inline-block;
        height: 23px;
        padding-right:6px;
    }
</style>
<div id="Tab">
    <span id="Tab1">
        <span id="Tab3">
            <span id="Tab2">Test Tab</span>
        </span>
    </span>
    <span id="Tab5">
        <span id="Tab4"></span>
    </span>
</div>

【问题讨论】：

标签： css firefox internet-explorer-6 css-sprites

【解决方案1】：

这个tool 可能是一个帮助。

【讨论】：

【解决方案2】：

这是一个有效的简化版本：

<div style="background: url('BlueTabSprite.png') no-repeat; width: 290px; min-width: 120px; max-width: 290px; height: 23px;">
<div style="float: right; background: url('BlueTabSprite.png') top right no-repeat; width: 10px; height: 23px;"></div>
Test
</div>

【讨论】：

这似乎行得通，而且比我做的要容易得多。

【解决方案3】：

我认为Sliding Doors Technique 可能是您想要的。

【讨论】：

这似乎是 RoBorg 实现的。感谢您的链接，它很有用。