1

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Zach B
  • 534
  • 7
  • 25

1 Answers1

3

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • inline block would have the desired effect – chiliNUT May 14 '14 at 01:26
  • It does screw with the layout a bit, so I wouldn't just state upfront to change it to inline-block. – BoltClock May 14 '14 at 01:27
  • hmm yeah it totally does. interesting. – chiliNUT May 14 '14 at 01:33
  • @chiliNUT: That's mainly because of what I said in my last paragraph - currently things like width, height and margin aren't taking effect because of the way the inlines are being rendered. Once you change them to inline-blocks, they will take effect. – BoltClock May 14 '14 at 01:34
  • @chiliNUT Setting display:inline-block; for the anchor elements worked (after adjusting margins). From what BoltClock mentioned, the height/width weren't actually being applied until the rule was added – Zach B May 14 '14 at 04:54
  • Thanks for the response, It helped me a lot. Changing the display to inline block fixed it. – John Royceton Arthur Mar 12 '19 at 15:08