0

次のようなタブをWebページに追加しようとしています。代替テキスト

この例をベースとして使用すると、部分的に機能するようになりました。テキストセクションを固定したいのですが、テールセクションを動的にサイズ変更してタブのコンテナの残りの部分を占めるようにするため、私の場合は異なります。

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>
4

3 に答える 3

2

引き戸のテクニックはあなたが探しているものかもしれないと思います。

于 2008-10-06T19:38:38.650 に答える
1

これは機能する簡易バージョンです。

<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>
于 2008-10-06T19:50:13.057 に答える
1

このツールが役立つかもしれません。

于 2009-02-02T01:41:09.033 に答える