0

jsfiddleで完全に機能する水平タブ用のCSSとHTMLがいくつかあります。ただし、Firefox 13とIE6（私がこれを動作させるために最も必要なブラウザー）の両方で、タブは垂直の順序付けられていないリストとして表示されます。

CSSは次のとおりです。

.tablist
{
    list-style:none; 
    height:2em;
    padding:0; 
    margin:0; 
    border: none;
}
.tablist li
{
    display:inline-block;
    float: left;
}

.tablist li a
{
    float: left;
    margin-right:0.13em; 
    padding:0 1em;
    text-decoration:none;
    border:0.06em solid #000;
    border-bottom:0;
    font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
    color:#000;
    background-color:#ccc;

    /* CSS 3 elements */
    webkit-border-top-right-radius:0.50em;
    -webkit-border-top-left-radius:0.50em;
    -moz-border-radius-topright:0.50em;
    -moz-border-radius-topleft:0.50em;
    border-top-right-radius:0.50em;
    border-top-left-radius:0.50em;
}

.tablist li a:hover
{
    background:#3cf; 
    color:#fff;
    text-decoration:none;
}
.tablist li#current a
{
    background-color: #777;
    color: #fff;
}
.tablist li#current a:hover
{
    background: #39C;
}

そしてここにHTMLがあります：

<div class="tablist">
    <ul>
        <li><a href="#Dashboard"><strong>Tutorialsphere</strong></a></li>
        <li><a href="#"><strong>Photoshop</strong></a></li>
        <li><a href="#"><strong>Illustrator</strong></a></li>
        <li><a href="#"><strong>Fireworks</strong></a></li>
        <li><a href="#"><strong>Flash</strong></a></li>
        <li><a href="#"><strong>CSS</strong></a></li>
        <li><a href="#"><strong>PHP</strong></a></li>
    </ul>
</div>

しばらくの間、これはFirefoxで機能していて、何も変更したことを覚えていませんが、変更する必要があります。

アドバイスをいただければ幸いです。

よろしく。

4

2 に答える 2

1

IE6はインラインブロックをサポートしていません。そのため、表示プロパティを無視してデフォルトのままにします。

于 2012-06-29T21:31:36.340 に答える
0

IE6は手元にありませんが、display：block;を試してください。float：このセレクターの左：.tablist li a

于 2012-06-29T21:59:53.467 に答える