2012-04-24 42 views
7

從我在這裏和那裏收集和理解(當我錯誤時阻止我): 只要您使用doctype觸發標準模式,子選擇器(>)就可以工作在IE7 +上,但html5的<!DOCTYPE html>應該這樣做。css孩子(>)選擇器不工作在IE8?

儘管如此,我的CSS:

nav > ul > li > a 
{ 
    padding: 0.2em 2em 0.2em 2em; 
    background-color: #FAFAFA; 
} 
nav > ul > li > a:hover 
{ 
    background-color: #AFAFAF; 
} 

似乎並沒有達到我的html:

<!DOCTYPE html> 
... 
<body> 
<header> 
    <nav> 
     <a class="inblock valignC logo" href="/"><img src="static/img/logo.gif" /></a> 
     <!--Menu nav : LOGO | Agence | Portfolio | Equipe | Clients | Contact--> 
     <ul class="inblock valignC"> 
      <li class="inline"><a class="ie" href="/agence/">Agence</a></li> 
     ... 
     </ul> 
... 
在IE8

,我都用我的針對性<a>增補專用.IE類。

任何解釋?

回答

11

您需要使用HTML5 Shiv的IE版本9下:

<!--[if lt IE 9]> 
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> 
<![endif]--> 
+0

完美謝謝,我會看看這段代碼 – 2012-04-24 22:33:48

+0

是的它是超級簡單。只需將它粘貼在部分的末尾,即可開始行動! – 2012-04-24 22:39:50

1

我認爲這是因爲舊的瀏覽器沒有導航元素。

2

它可能不是選擇器,而是標籤本身,因爲它們沒有在IE8及以下版本中定義爲標準標籤。您可以通過僅使用ul > li並查看選擇器是否工作來查看是否屬於這種情況。

除非在更多人升級瀏覽器之前不使用HTML5標籤,否則您可以做的不多。我個人寧願現在使用<div class="nav">

+0

[html5shiv](http://code.google.com/p/html5shiv/)會解決這個問題嗎? – 2012-04-24 22:24:24

+2

其實,你可以使用JS技巧來使元素工作。 'document.createElement('nav')'在使用之前。 – Andrea 2012-04-24 22:24:40

+0

沒錯,就是它,

1

它不起作用,因爲IE8不理解,或「正確」的工具,HTML標記,如<nav>

不要使用HTML 5,直到2015年。這是兩個原因:

  1. 對於HTML5的W3C推薦標準尚未最終確定,直到2014年12月,所以任何當前的瀏覽器實現在猜測什麼什麼的文件定稿將包含。現在起作用的代碼不能保證在那之後工作(但可能會)。在頂部添加JS黑客,以使瀏覽器兼容HTML5,增加了更多潛在的前向兼容性問題。

  2. 到2015年,IE8的市場份額可能會達到最低水平,低於2-3%,此時支持IE8的好處將被不使用HTML5兼容代碼的成本超過。

在此期間,它是使用HTML5 DOCTYPE是個好主意,因爲它是向前和向後兼容,使用也是有效的HTML4(換句話說標籤HTML5標籤的子集,是在HTML4和HTML5中是有效的,其中大部分是有效的)。我個人喜歡使用<div class="nav"></div>而不是<nav></nav>等。

在一天結束時,做你想做的事情,但至少需要注意這些問題,特別是在一個HTML5是流行語的世界裏。經常使用和不恰當地使用。