菜單選項卡在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中無法正常工作

回答

相關問題