0

メニュータブがInternetExplorer8でのみ正しく機能しないメニュータブがInternetExplorer8でのみ正しく機能しないHTMLWebページの上記のリンクにあるタブがIE8で機能しません。それらはIE9、サファリ、Firefox、オペラなどで動作します。

IEの問題は、タブをクリックしても開かないことです。

HTML：

div id="tab2" class="css-tabs">
        <ul class="noint11_menu">
            <li id="item-1"> <a href="#item-1">Shipping</a>
                <div>
                    <p><img id="shippingtable" src="http://www.ubreakirepair.com/ebaysite/images/shippingtable.png"/></p>
                    <div class="footer">----------</div>
                </div>
            </li>
            <li id="item-2"> <a href="#item-2">Payment</a>
                <div>
                    <p>Tab Content 2</p>
                     <div class="footer">---------</div>
                </div>                
            </li>
            <li id="item-3"> <a href="#item-3">Returns</a>
                <div id="notice">
                    <p>content </p>
                    <div class="footer">---------</div>
                </div>
            </li>
            <li id="item-4" title="click for Tab 4"> <a href="#item-4">Tab 4</a>
                <div>
                    <p>Tab Content 4</p>
                    <div class="footer">------------</div>
                </div>
            </li>
        </ul>
    </div></td>

CSS：

.css-tabs {
    position: relative;
    text-align: left; /* This is only if you want the tab items at the center */
    height: auto;
    margin-left:-30px;
    display: 
}
.css-tabs ul.noint11_menu {
    list-style-type: none;
    display: inline-block; /* Change this to block or inline for non-center alignment */
}
.css-tabs ul.noint11_menu > li {
    display: block;
    float: left;
}
.css-tabs ul.noint11_menu li > a {
    color: #EEEEEE;
    text-shadow: 1px 1px 1px #000;
    font-family: 'MuliLight', Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    display: block;
    text-align: center;
    border: 1px solid #002232;
    padding: 5px 10px 5px 10px;
    margin-right: 10px;
    -moz-user-select: none;
    cursor: pointer;
    background: #014464;

}
.css-tabs ul.noint11_menu li > div {
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
    color: #ccc;
    text-align: left;
    padding: 0;
    margin-left: 32px;
    background: #181818 /* added this */;
    height:350px

}
.css-tabs ul.noint11_menu li > div > p {
    border: transparent;
    padding: 10px;
    margin: 0;
}
.css-tabs ul.noint11_menu li > a:focus {
    border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > a {
    cursor: default;
    border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > div {
    display: block;
}
#item-1 div {display: block}
#item-2 div { height:535px}
#item-3 div { height:535px}
#item-4 div { height:535px}



.footer{color:#fff; text-align:center}​
4

2 に答える 2

1

:targetIE8は、これらのタブを表示するために信頼しているものをサポートしていません。

あなたの最善の選択肢は、タブのコンテンツを異なるページに分割し、ナビゲーションのために上部にある一連のリンクを使用することだと思います。ナビゲーションリンクはタブのようにスタイル設定できるため、サイトは同じように見えます。各タブをクリックした後にページが読み込まれるだけです。

また、最新のブラウザを使用しているユーザーでも、サイトを閲覧している間、戻るボタンと進むボタンが予測可能な方法で動作するため、この代替手段は混乱を招きません。

:targetセクションリンクをクリックした後にユーザーがジャンプしたページ内アンカーを強調表示するために使用する方が適切です。これを使用して、ページ内の主要なコンテンツの大きなチャンクが非表示になっているタブコントロールを偽造することは、あまりアクセスしやすく、ユーザーフレンドリーではないようです。

于 2012-10-19T17:25:48.330 に答える
1

:targetIE8でサポートされていないCSS機能を使用しようとしています。

古いブラウザをサポートしたい場合、最善の解決策は、ナビゲーションデザインを再考して、それらのブラウザには存在しない最新のブラウザ機能を使用しないようにすることです。

ただし、この機能を使用する必要がある場合は、Selectivizrライブラリからヘルプを入手できる場合があります。これは、古いバージョンのIEにさまざまな最新のCSSセレクターのサポートを追加するポリフィルスクリプトです。

これには:targetセレクターが含まれるため、理論的には、Selectivizrをサイトに追加することで問題を解決できます。（ただし、の場合:target、SelectivizrはIE8のみをサポートします。IE7またはIE6もサポートする必要がある場合は、機能しません。Selectivizrでさえ、指定されたものでしか多くのことを実行できません）。

（また、SelectivizrではjQueryなどのサポートライブラリも含める必要があることに注意してください。現在、ページにはjavascriptがまったくないため、これを追加するのは非常に大きな負担になる可能性がありますが、少なくとも最小限に抑えることができます。 IE8によってのみ読み込まれるように、条件付きコメントを使用してコーディングすることによる影響）

于 2012-10-19T17:58:32.013 に答える