：活躍的CSS選擇器不適用於IE8和IE9

Question

這是我的site。這是我在社區中經歷並解決的一系列跨瀏覽器差異的最後一個問題。

基本上，在Internet Explorer 8和Internet Explorer 9中，:active樣式不適用於菜單。按下時它會變暗。請讓我知道爲什麼以及如何解決。提前致謝。

Answer 1

的：有源僞類適用而 元件被由 用戶激活。例如，在時間 之間，用戶按下鼠標按鈕並且 釋放它。見W3 documentation。

但是你申請你的:active選擇您<li>元素， ，因爲它從來沒有真正被激活，不能有一個活躍的狀態 - 僅徘徊。您應該應用 :active狀態 <a> < - 真正的IE 6

UPDATE：這裏是在jsFiddle測試樣品，你可以看到它的工作原理確定<a>元素上，而在<li>

有趣的信息不正常我發現here

的：當 鏈路正在由用戶選擇有源僞類適用。

CSS1有點模糊的有關此 行爲：「‘有效’鏈接是一個 當前正在選擇（例如 由鼠標按鈕按壓）由 讀者」。另外，在CSS1中，：active是 互斥排列：link和 ：visited。 （也沒有：懸停 僞類。）

CSS2改變了一些事情，以便爲 規則：活動可同時適用， ：訪問或：鏈接。和行爲 解釋好一點：「的 ：。活性僞類適用而一個 元件正被 用戶激活例如， 用戶按下鼠標按鈕， 釋放它的時間之間」

IMO，FF等人比IE更符合CSS2更好 。但是因爲鏈接應該是 來加載一個新頁面，所以IE可能會 合法地說鏈接仍然是 「active」，而新頁面是 加載，這就是發生了什麼情況。

您可以通過 看到FF類似 反直覺的行爲，點擊該鏈接，但移動你的鼠標 關閉鏈接的同時保持 的鼠標按鍵。鏈接不是 激活（不加載新頁面）， 但鏈接仍處於：活動 狀態。另一方面，Chrome和 Opera取消激活鏈接，但在 不同的時間; Chrome只要 鼠標離開鏈接區域，Opera就不會 ，直到釋放鼠標按鈕。在此 示例中，IE 的行爲與FF相同。 （點擊拖動 鼠標關閉鏈接後進入，你會看到 行爲更差。）

我不會把任何這些 差異「錯誤」，在規範，因爲 歧義。

我可以提供的唯一解決方法是 接受您無法控制瀏覽器行爲的每個 方面。 不同瀏覽器的用戶對行爲的期望有所不同，如果你開始搞亂用戶期望， 你就錯了。

Answer 2

貪圖關聯的，並保存任何人尋找解決的麻煩，我還發現了一個「錯誤」在IE < = 10，在那裏你不能將樣式應用於：好動的孩子，如;

a:active img { 
    position:absolute; 
    top:-30px; 
} 

上面不會改變圖像的位置在IE < = 10，在這種情況下則需要適用：有源子元件本身上;

a:active img, 
a img:active { 
    position:absolute; 
    top:-30px; 
} 

在大多數情況下是不作爲錨內的任何文本的完美解決方案需要有比圖像較高的Z-index值，這意味着圖像將只更改它基於點擊圖像位置本身（給圖像：活動狀態）......這使我處於一個次要的束縛中，但是一個無關緊要的束縛（僅用於css解決方案）。

所以，雖然這不是一個修復，但它更像是對其他人的「警告」，關於IE中活動僞選擇器的垮臺。垃圾。 =（