爲什麼IE7和IE8只會顯示第一個標籤的內容？

Question

我工作的網站設計以及開發我面臨以下問題，請幫助我... !!!

我有三個選項卡它在IE9，Firefox，Chrome，Safari和Opera上完美玩笑。

我使用CSS3只&我不希望任何腳本語言&要完美運行在所有瀏覽器幫我...

可以看出U here也

我的HTML代碼：

<article class="tabs"> 

    <section id="tab1"> 
     <h2><a href="#tab1">Tab 1</a></h2> 
     <p>This content appears on tab 1.</p> 
    </section> 

    <section id="tab2"> 
     <h2><a href="#tab2">Tab 2</a></h2> 
     <p>This content appears on tab 2.</p> 
    </section> 

    <section id="tab3"> 
     <h2><a href="#tab3">Tab 3</a></h2> 
     <p>This content appears on tab 3.</p> 
    </section> 

</article> 

&我的css代碼是：

article.tabs 
{ 
    position: relative; 
    display: block; 
    width: 40em; 
    height: 15em; 
    margin: 2em auto; 
} 

article.tabs section 
{ 
    position: absolute; 
    display: block; 
    top: 1.8em; 
    left: 0; 
    height: 12em; 
    padding: 10px 20px; 
    background-color: #ddd; 
    border-radius: 5px; 
    box-shadow: 0 3px 3px rgba(0,0,0,0.1); 
    z-index: 0; 
} 

article.tabs section:first-child 
{ 
    z-index: 1; 
} 

article.tabs section h2 
{ 
    position: absolute; 
    font-size: 1em; 
    font-weight: normal; 
    width: 120px; 
    height: 1.8em; 
    top: -1.8em; 
    left: 10px; 
    padding: 0; 
    margin: 0; 
    color: #999; 
    background-color: #ddd; 
    border-radius: 5px 5px 0 0; 
} 

article.tabs section:nth-child(2) h2 
{ 
    left: 132px; 
} 

article.tabs section:nth-child(3) h2 
{ 
    left: 254px; 
} 

article.tabs section h2 a 
{ 
    display: block; 
    width: 100%; 
    line-height: 1.8em; 
    text-align: center; 
    text-decoration: none; 
    color: inherit; 
    outline: 0 none; 
} 

article.tabs section:target, 
article.tabs section:target h2 
{ 
    color: #333; 
    background-color: #fff; 
    z-index: 2; 
} 

article.tabs section, 
article.tabs section h2 
{ 
    -webkit-transition: all 500ms ease; 
    -moz-transition: all 500ms ease; 
    -ms-transition: all 500ms ease; 
    -o-transition: all 500ms ease; 
    transition: all 500ms ease; 
} 

在此先感謝... !!

Answer 1

這裏的問題是您使用的瀏覽器功能在IE7/8中不受支持。

1. :first-child在IE7中不可用。

2. :nth-child()在IE7或IE8中都不可用。

3. :target在IE7或IE8中不可用。

4. transition直到IE10纔可用。

5. box-shadow，border-radius和rgba()顏色在IE8或更早版本中不受支持。

6. 而最重要的是，您使用的HTML5標籤，如section和article，這在IE8及更早版本中不受支持。

大多數這些點可以用填充工具腳本來解決，但是既然你說你不希望使用任何腳本，那麼很遺憾你有點卡住了。

有些事情，你可以通過簡單地使用舊風格的選擇，如果你真的不希望使用任何腳本（如使用div標籤而不是section和article）得到解決，但你的代碼的主要觀點是提供一個使用CSS :target來切換選項卡的Tab鍵界面，簡短的回答是，這在IE8或更早版本中不起作用，我不知道任何非腳本選擇。

所以我覺得真正的一點是，如果你想支持IE7/8，你的有來使用一些javascript代碼。

您可以使用polyfill腳本來支持您使用的CSS/HTML5功能，這意味着支持這些功能的新型瀏覽器不必使用腳本，但舊版瀏覽器將需要它們。對於那個很抱歉。

更多Polyfills：

「填充工具腳本」是針對已經明確寫入放棄舊的瀏覽器的新功能支持（主要是他們瞄準老了廣泛的JavaScript庫的總稱IE版本）。

每個填充腳本都是爲了支持特定的瀏覽器功能而編寫的，因此對於類似於您的代碼，您可能需要多個填充才能獲得完整的功能奇偶校驗。但是，在某些情況下，對於不太重要的功能，您可能只想讓它保留舊IE版本不具備的所有功能 - 例如border-radius很好，但如果它不是「 t支持。

一些polyfills這一定會幫助你：

• Selectivizr - 增加了對CSS3選擇器像:nth-child()，:target支持等

• Modernizr - 增加支持HTML5元素，並提供一個使用其他polyfills的特徵檢測框架。

• CSS3Pie - 增加了對border-radius,box-shadow等的支持。

還有一個polyfill腳本的大列表listed here。隨意瀏覽列表並選擇你覺得最有用的那個。

要記住所有polyfills的一件重要事情是它們不是瀏覽器的官方部分;他們只是有人寫的小JS庫。這意味着他們不能保證100％的工作。他們可能會爲作者解決問題，但與現代瀏覽器中的真實功能相比，他們的功能中可能缺少功能或缺口。他們也可能會放慢速度，並相互衝突（特別是如果你使用其中幾個）。

再一次，你將不得不忍受這一點，因爲這是當你想要支持舊瀏覽器中的現代瀏覽器功能時事情的本質。將功能添加到舊瀏覽器的功能是有限制的。最終，如果您確實需要使用現代功能，則可能需要停止完全支持一些較舊的瀏覽器 - 尤其是IE7。