IE9 Compatibility mode shows link outline, where IETester Tabs 7/8 do not

Question

http://jsfiddle.net/B4van/

I have set up this basic fiddle.

As I have said in the title - the outline dotted border that is almost always added to links whenever they are clicked is not visible in IE7/8 when browsing with IETester, but the border is displayed in IE9 compatibility mode.

Since the other developer is working with IE9 only, he is testing the page with Compatibility Mode and is repeatedly informing me about the dotted border that has to be removed. He's asking me to add onfocus="if(this.blur)this.blur();" for every link on the page.

I have noticed in the other developers previous works, that he is seriously using this onfocus snippet. Although, that's the first time for me when I'm seeing those to prevent outline border.

Well, that seems more than wrong and odd to me, especially when there are plenty of links, so I am now asking here. Is it just IE9 Compatibility Mode bug, or I seriously have to append the onfocus snippet?

I have always, and now set it up with CSS:

a, a:focus
{
    outline: none;
}

But it seems to be not working.

Maybe someone with native IE7/8 (well, maybe on virtual os, but more native than IE Tester) could test it and report the result?

Answer 1

According to http://www.w3schools.com/cssref/pr_outline.asp

Outline is supported in IE8 only if a !DOCTYPE is specified. So yes, it clearly states, that IE7 is not even close to support it.

Answer 2

you can try this

a:active {outline:expression(this.onFocus=this.blur());}

internet explorer link outline | css5