菜单选项卡在Internet Explorer 8中无法正常工作

菜单选项卡在Internet Explorer 8中无法正常工作菜单选项卡在Internet Explorer 8中无法正常工作链接上的HTML链接上的选项卡在IE8中不起作用。他们在IE9，safari，Firefox，opera等工作。菜单选项卡在Internet Explorer 8中无法正常工作

在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}

来源

2012-10-19 Laura Hill

IE8 does not support :target，这是你是依靠什么在显示这些标签。

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

即使对于使用现代浏览器的用户来说，这种替代方法也不那么令人困惑，因为他们的后退和前进按钮在浏览网站时会以可预测的方式运行。

:target最好用于突出显示用户点击段落链接后跳转到哪个页内定位点。使用它来伪装一个选项卡控件，隐藏了页面中的大量主要内容，看起来不太容易访问或用户友好。

来源

2012-10-19 17:25:48 tuff

我该如何复制此列表。他们只使用CSS：http://www.ebay.co.uk/itm/190741304903?item=190741304903&_trksid=p5197.m462 –

他们使用JS的标签在IE8中。 – tuff

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

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

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

这包括:target选择器，因此从理论上讲，将Selectivizr添加到您的网站应该可以解决您的问题。（但请注意，在:target的情况下，Selectivizr仅支持IE8;如果您还需要支持IE7或IE6，则它将不起作用 - 即使Selectivizr只能对其提供的内容做很多操作）。（还请注意，Selectivizr要求您还包括一个支持库，例如jQuery;我注意到您的页面目前根本没有任何javascript，因此这可能是一个相当大的添加负担，但您可以至少通过使用条件注释对其进行编码以使其仅由IE8加载来最小化影响）

来源

2012-10-19 17:58:32 Spudley

菜单选项卡在Internet Explorer 8中无法正常工作

回答

相关问题