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 div
s 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.