如何修復IE9的懸停僞類

我知道這是一個典型的問題，但我找不到解決方案。我的CSS下拉菜單在任何地方都可以正常工作，但IE9。下拉菜單在IE9中不起作用。有什麼建議？謝謝。如何修復IE9的懸停僞類

這是菜單HTML：

<div id="menu"> 
<ul> 
    <li><a href="#"><span>Needs Assessment</span></a> 
    <ul> 
     <li><a href="#">History1</a></li> 
     <li><a href="#">Team1</a></li> 
     <li><a href="#">Offices1</a></li> 
    </ul> 
    </li> 

    <li><a href="#"><span>Design and Development</span></a> 
    <ul> 
     <li><a href="#">History2</a></li> 
    <li><a href="#">Team2</a></li> 
     <li><a href="#">Offices2</a></li> 
    </ul> 
    </li> 

    <li><a href="#"><span>Prepare and Implement</span></a> 
    <ul> 
     <li><a href="#">History3</a></li> 
     <li><a href="#">Team3</a></li> 
     <li><a href="#">Offices3</a></li> 
    </ul> 
</li> 

<li><a href="#"><span>Debrief and Measure</span></a> 
    <ul> 
     <li><a href="#">History4</a></li> 
     <li><a href="#">Team4</a></li> 
     <li><a href="#">Offices4</a></li> 
    </ul> 
</li> 

<li><a href="#"><span>Resources</span></a> 
    <ul> 
    <li><a href="#">History4</a></li> 
    <li><a href="#">Team4</a></li> 
    <li><a href="#">Offices4</a></li> 
    </ul> 
</li> 

</ul> 
</div>

這裏是我的這個菜單CSS：

#menu { 
    width: 942px; 
    height: 47px; 
    border: solid 0px #000; 
} 

#menu ul { 
    margin-left: 0px; 
    padding-left: 0px; 
} 

#menu ul li { 
    position: relative; 
    display: inline; 
    float: left; 
    list-style: none; 
} 

#menu li ul { 
    position: absolute; 
    margin: 0px; 
    padding: 0px; 
    display: none; 
} 

#menu li:hover ul { 
    display: block; 
    z-index: 999; 
} 

#menu li li a { 
    color: #fff; 
} 

#menu li li a:hover { 
    color: #ccc; 
} 

#menu ul li a { 
    display: block; 
    width: 188px; 
    padding: 12px 0px 10px 0px; 
    background:url 'http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png'); 
    border: solid 0px black; 
    font-family: 'Cabin', sans-serif; 
    font-size: 14px; 
    font-weight: normal; 
    text-decoration: none; 
    text-align: center; 
} 

#menu a span { 
    float: left; 
    display: block; 
    padding: 3px 5px 4px 6px; 
    color:#fff; 
    float: none; 
    border: solid 0px black; 
} 

#menu a:hover span { 
    color:#bbb; 
}

來源

2012-01-17 stevenpepe

使用適當的縮進可以更容易閱讀HTML。另外，請詳細解釋_「不起作用」_的含義。畢竟，我們無法看到您的頁面正在運行。 – Sparky 2012-01-17 18:36:45

我很確定IE9處理'：hover'僞類就好了。 – BoltClock 2012-01-17 18:40:20

更好？這是一個單級下拉菜單。它工作正常，但IE9。當你將鼠標懸停在菜單上時，沒有任何東西會掉下來。 – stevenpepe 2012-01-17 18:40:50

正如Sparky672所說，您的HTML無可救藥無效。你應該修復它。

然而，要解決您遇到的特定問題，所有你需要做的就是添加一個有效的doctype作爲第一行：

<!DOCTYPE html>

沒有這個，IE是怪癖模式。

來源

2012-01-17 19:07:16 thirtydot

嗯，我不會說絕望，只是一個小的監督與HTML重複標籤在一些頁面中，但doctype解決了這個問題。 – stevenpepe 2012-01-17 19:14:16

@stevenpepe，thirtydot是100％正確的，我應該更具體，雖然缺少「doctype」是我鏈接到的Validator報告中列出的第一件事。現在你的錯誤變得更糟...... [Validator拒絕解析頁面]（http://validator.w3.org/check?uri=http://www.laerdal.com/_LOCAL_CONTENT/usa/discoversimulation/debrief/ ＆charset =％28detect％20aautomatically％29＆doctype = Inline＆group = 0），因爲您在''和''之間有一些內容，應該沒有任何內容。 – Sparky 2012-01-17 19:32:52

沒有看到一個演示，我有這是否會解決它不知道，但你有在你的CSS語法錯誤。缺少開頭(。

這樣，總是對我的作品......

background-image: url(http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png);

市價修改意見和demo URL：

你有一些嚴重的HTML validation errors。 （編輯＃2：原來，最先上市的錯誤是缺少doctype將在怪癖模式扔IE）

你在你的頁面的頂部有這個...

<html> 
<head> 
    <title>Debrief and Measure</title> 
</head> 

<body> 
<html> 
<head> 
    <title>Discover Simulation</title> 
</head> 
    <link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'> 
    <link href="/Laerdal/_LOCAL_CONTENT/usa/css/discoversimulation.css" rel="stylesheet" type="text/css"> 

<body>

注意所有重複的<html>，<body>和<head></head>標籤。

在你的頁面的底部

則...

</body> 
</html> 

<div align="center"> 

    <div id="whitebox"> 

     ...snipped... 

    </div> 

</body> 
</html>

通知外來</body></html>標籤。

另外：align="center"已被棄用。

來源

2012-01-17 18:43:39 Sparky

+1，語法錯誤是大多數所謂的「瀏覽器錯誤」背後的真正原因。 – c69 2012-01-17 18:49:28

我的實際代碼有（。它似乎沒有複製。這裏是鏈接查看：http：// www .laerdal.com/_LOCAL_CONTENT/usa/discoversimulation /彙報/ – stevenpepe 2012-01-17 18:50:26

@stevenpepe，你有一些嚴重的HTML編碼問題。請參閱我編輯的答案。 – Sparky 2012-01-17 18:58:16

如何修復IE9的懸停僞類

回答

相關問題