It seems to me that Gecko has a bug involving ":active". To illustrate, put this into a file called test.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "hxxp://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<style type="text/css">
.clickable {
border: solid black 1px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
}
.clickable:active {
background-color: gray;
}
</style>
</head>
<body>
<span class="clickable">blah</span>
</body>
</html>
Now open it up in, say, FF3. The span should work a little like a button: if you mousedown on it, the background changes color. When you mouseup, it returns to normal.
Note that this even works if you mousedown inside the span, move the mouse outside the browser window, and release it there: during the part where the mouse is down, the background is gray. When released, the span returns to normal.
So far so good. But try wrapping it in a frame:
<html>
<frameset cols="50%, 50%">
<frame src="test.html" />
<frame src="http://google.com" />
</frameset>
</html>
Load that one up. Now when you mousedown inside the span, move the mouse anywhere outside the frame, and mouseup, the span stays gray forever -- i.e., CSS considers it ":active" forever.
This only seems to happen in a frame, and the problem doesn't show up in KHTML-based browsers.
Anyone got a workaround?