Internet Explorer behaves differently from Firefox, Chrome, Opera, Safari. See my question:
HTML link with padding and CSS style active does not work
Is this undefined behavior? Or I need to report a bug. If later, then which of browsers are doing right?
Here is a test code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>css active padding href problem</title>
<style type="text/css">
a{
background:#CCC;
border:1px solid #666;
padding:0 35px 0 0;
}
a:active{
padding:0 0 0 35px;
}
</style>
</head>
<body>
<div>
<p>Click on <i>Stack</i> - href does not work.
Click on <i>Overflow</i> - href works.
All browsers are affected.
Except IE.</p>
<a href="https://stackoverflow.com/">StackOverflow</a>
</div>
</body>
</html>
I think IE is doing wrong. a:active is working when the mousebutton is down, but the href doesn’t go off before the mousebutton is up again.
Pseudo-code:
If the mouse goes up outside of the element, nothing happends. Try to click on a link, then drag your mouse away from the link and then release the button. Nothing should happend.
That is what happening in your code. When you are clicking at the Stack-text, the link moves away fron your pointer, and when you release the button, the link is no longer under the pointer. It moves back at the release-time, but then it is too late.
Therefore, I think IE is doing wrong.