導航欄IE6,7,8不顯示良好，但適用於9和所有其他瀏覽器

[www.tdeltd.net] [1]導航欄IE6,7,8不顯示良好，但適用於9和所有其他瀏覽器

[1]：http://tdeltd.net是我的地盤。導航欄在除9之外的所有IE版本中都被打破。所有其他瀏覽器都正確地顯示該網站。經過兩天的搜索，我在這裏發佈，因爲我無法找到解決方案。我在w3c驗證中遇到了兩個錯誤，但它們與發生破壞的標頭和導航標籤無關。我看到一些與IE版本相關的JavaScript指向不存在的文件。我不知道在哪裏得到這些。這個設計來自一個模板。 CSS驗證沒有錯誤，所以我不知道在哪裏把重點放在試圖解決ie6,7和8問題。

CSS的標題：在那些瀏覽器

/* Header */ 
    header { 
     height:262px; 
     position:relative; 
    } 

/*===== header =====*/ 
header nav { 
    height:50px; 
    background:url(../images/nav-tail.gif) repeat-x left top; 
    position:absolute; 
    right:49px; 
    top:201px; 
    width:988px; 
} 
    header nav ul li { 
     float:left; 
    } 
     header nav ul li a { 
      font-size:1.273em; 
      line-height:1.2em; 
      font-weight:bold; 
      color:#fff; 
      text-decoration:none; 
      display:block; 
      padding:17px 20px 14px 20px; 
     } 
     header nav ul li a:hover, 
     header nav ul li.current a { 
      background-color:#df5b03; 
      border-bottom:13px solid #0065a4; 
     }

HTML容易被看到在網絡上「獲取源」。我的挑戰是我只能擁有一個mac，而且必須依靠其他人來獲得破解方面的反饋。任何人都可以幫助我指出一個問題領域或任何潛在的想法，爲什麼除了以前的IE版本，這看起來很完美？很多人提前感謝你！

達里爾

再次感謝大家的幫助。將html5shiv添加到頭部是一個明確的解決方案。堆棧溢出非常好！非常高興我註冊併發布。我的問題在一個小時內就解決了。花了我更長的時間來測試和確認，而不是得到堅定的答案。再次感謝！

來源

2011-09-29 quotaholic

您需要的是類似html5shim的東西，它將在IE中啓用HTML5標記（比版本8更早）。需要JS，但...

來源

2011-09-29 13:45:56 peirix

只需將html5shim放在頭文件中的CSS鏈接。我只有一個mac，所以我不能測試。測試頁面是http://tdeltd.net/index-10.html。感謝您的回覆。如果你有時間可以窺視一下它的外觀是否正常？ – quotaholic

@quotaholic它在IE7,8,9中看起來是一樣的（： – peirix

較舊版本的IE不支持自定義標記，例如您已使用的<nav>。使用<div class="nav">代替瀏覽器兼容性。

來源

2011-09-29 13:44:23

我對css和html的變化有點綠色。我是否需要在CSS中更改任何內容以正確地將它與html文檔中針對此更改所做的更改聯繫起來？感謝您的快速回復！ – quotaholic

好吧，找到對'nav'的引用並在前面加上'.'（所以'.nav'）。這應該做到這一點。 –

即小於9的版本本身不支持HTML 5元素，如「導航」。但是，修復很簡單。通過一些奇怪的怪癖，如果你通過JS創建元素（你甚至不需要將它插入到DOM中），IE現在知道它存在並能夠設置它。

在 <head>

因此，您所使用的每個HTML5元素類型做到這一點：

<!--[if lt IE 9]> 
<script> 
document.createElement('nav'); 
//ditto for other html5 elements 
</script> 
<![endif]-->

來源

2011-09-29 13:46:00

）感謝您的快速回復。我查看了另一個客戶的另一個模板，並找到了一個html5.js，並在此範圍內找到了這一行： 'code'document.createElement（「nav」）;'code'你是否認爲我可以在js文件夾中彈出這個html5.js，然後離開if，然後腳本在頭上，或者我應該堅持你的建議？ – quotaholic

很酷 - 如果你覺得它有幫助，請記住upvoting？這不僅僅適用於我（雖然很高興獲得積分），還可以幫助其他人直觀地看到這個答案有幫助，如果他們有類似的問題。 –

我會很高興，我該如何投票呢？相當新的在這裏...感謝您的答覆，但我的問題上的html5.js上傳到網站正在等待。你認爲這將是一個可行的修復？ – quotaholic

HTML 5個元素不可低於IE 9

下面的代碼將解決這個問題：

http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/

<!--[if lt ie 9]> 
    <script> 
     document.createElement('nav') 
    <script> 
    <style> 
     nav{display:block} 
    </style> 
<[endif]-->

記住，在IE中創建它們之後對它們進行風格設計很重要。

最好的辦法是使用htmlshim，其託管在谷歌代碼，並可能cahched對人的瀏覽器已經：

<!--[if lt IE 9]> 
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

最佳性能是放置在頭部的CSS後。

來源

2011-09-29 13:54:06

謝謝你的回覆！我將html5shim粘貼到複製的測試頁面http://tdeltd.net/index-10.html。由於我只有一個mac，我可能會問有人看這個文件，看它是否在Pre IE 9上正確顯示？再次感謝！ – quotaholic

被阻止在我的作品的防火牆上...可以將相關代碼放在http://jsfiddle.net上 –

http://jsfiddle.net/aK2Kr/ – quotaholic

導航欄IE6,7,8不顯示良好，但適用於9和所有其他瀏覽器

回答

相關問題