IE offsetting and ignoring height/width of anchor focus outlines?

Question

I've got a scenario where focus outlines are not being represented correctly in Internet Explorer 10 when focus is given to an a element.

Nested inside each a element is a series of div elements and within the lowest-level div is an img element.

When I tab to each a element (via IE10), focus outlines show up offset to the right of the group of a elements. When I view the page in Chrome, focus outlines show up perfectly.

I've been able to reproduce this in a JSFiddle.

CSS is bloated with styles from the existing project I'm having the issue in.

Answer 1

You haven't adjusted the display property for your a elements, so they're still displaying inline, even though they're "containing" block-level div elements. The result is in accordance with this section of the CSS2.1 spec which has a description on how inlines containing block children should behave.

None of the browsers are automatically adjusting the display modes, but what Chrome appears to be doing is guessing the location of its default outline and drawing it according to its best guess. The really weird thing about this, though, is that it doesn't always do this. The moment you adjust the outline style, the outline behavior immediately reverts to something similar to what you see on other browsers:

a:focus{
    outline-style: dashed;
}

Unfortunately, because outline rendering is poorly defined, it's not possible to judge if any of the browsers are buggy in this aspect. And although HTML5 explicitly allows a elements to contain most any other element, it does not state how their display mode should be adjusted, if at all, so it looks like browsers just don't do anything about it. The main issue here, though, is with outlines.

The easy solution to the original problem is of course to set the display style of your a elements explicitly to something other than the default inline. This will at the very least improve outline rendering by making it more predictable. You may or may not wish to move the styles for your div elements to your a elements instead as well, depending on what sort of role those divs play in your layout and whether they are necessary. As it is, most of the styles that you do have on a aren't actually taking effect because of what I've described from the spec.