csshover.htc在IE7下使用:active偽類無效的原因

2024-07-11 08:23:02

字體：大中小

來源：轉載

供稿：網友

csshover

相信做前端開發都知道，IE6、IE7都不支持:active偽類，IE6更甚，連:hover偽類都不支持。為了解決這個問題，一般都會引入一個csshover.htc文件來解決。

目前該文件版本為3.11，
下載地址：http://peterned.home.xs4all.nl/csshover.html
如果你發現自己使用的不是最新的版本，趕緊更新吧。

Bug

在使用過程中，發現IE7的:active居然不起作用。做了一番測試，最后發現，原來是選擇符權重的問題。

失效的條件為：樣式選擇符都使用類選擇符。
示例代碼如下(需要IE7瀏覽)：

<!doctype html><head><style>body { behavior:url("csshover3.htc"); }.d{ width:200px; height:200px; background:yellow;}.d:hover{ background:green;}.d:active{ background:red;}</style></head><body> <div class="d"></div></body>

此時鼠標按下時是不會有變化的。

解決方案

A.不使用類選擇器。可以使用元素選擇符，或id選擇符。
B.增加:active偽類的權重。

對于A方案，可以修改選擇符為：
-----------------------------
div{}
div:hover{}
div:active{}
-----------------------------

或者：

-----------------------------
#d{}
#d:hover{}
#d:active{}

<div id="d"></div>
-----------------------------

對于B方案，可以按權重增加方式使用選擇符：

-----------------------------
div{}
.d:hover{}
#d:active{}

<div id="d" class="d"></div>
-----------------------------

或者增加選擇符：

-----------------------------
.d{}
.d:hover{}
.b .d:active{}

<body class="b">
<div id="d" class="d"></div>
</body>
-----------------------------

原因

導致該問題的原因，可能是因為給:hover和:active使用了同樣的類選擇符。此時需要給:active多增加一個類選擇符或ID選擇符，元素選擇符的權重還不夠。

htc文件是通過給元素添加類來實現效果變化，鼠標按下時，會給元素添加兩個類:onhover和onactive，至于為何onactive的樣式沒生效，目前還不知道。