0

菜单选项卡仅在 Internet Explorer 8 中无法正常工作菜单选项卡仅在 Internet Explorer 8 中无法正常工作我的 HTML 网页上的上述链接中的选项卡在 IE8 中无法正常工作。它们在 IE9、safari、Firefox、opera 等中工作。

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

IE8 不支持:target，这是您显示这些选项卡所依赖的。

我相信您最好的选择是将标签内容分成不同的页面，并在顶部使用一组链接进行导航。您的导航链接可以设置为类似于选项卡的样式，因此该站点仍然可以看起来相同 - 单击每个选项卡后您只需加载一个页面。

即使对于使用现代浏览器的用户，这种选择也不会那么混乱，因为他们的后退和前进按钮在他们浏览网站时将以可预测的方式运行。

:target更好地用于突出显示用户在单击部分链接后跳转到的页内锚点。使用它来伪造一个选项卡控件，其中隐藏了页面中的大块主要内容似乎不太容易访问或用户友好。

于 2012-10-19T17:25:48.330 回答
1

您正在尝试使用:targetIE8 不支持的 CSS 功能。

如果您想支持旧版浏览器，最好的解决方案是重新考虑您的导航设计，使其不使用这些浏览器中不存在的现代浏览器功能。

但是，如果您确实需要使用此功能，您可以从Selectivizr 库中获得一些帮助。这是一个 polyfill 脚本，它为旧版本的 IE 添加了对各种现代 CSS 选择器的支持。

这包括:target选择器，因此理论上，将 Selectivizr 添加到您的站点应该可以解决您的问题。（但请注意，在 的情况下:target，Selectivizr 仅支持 IE8；如果您还需要支持 IE7 或 IE6，它将无法工作——即使 Selectivizr 也只能用它提供的功能做很多事情）。

（另请注意，Selectivizr 要求您还包括一个支持库，例如 jQuery；我注意到您的页面目前根本没有任何 javascript，因此添加这可能是一个很大的负担，但您至少可以最小化通过使用条件注释对其进行编码来产生影响，以便它仅由 IE8 加载）

于 2012-10-19T17:58:32.013 回答