Ie Offsetting and Ignoring Height/Width of Anchor Focus Outlines

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

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.

Inconsistant CSS behavior with :target

What needs to happen for the css as I have it above to work in Chrome or Safari is that the anchor tag must display as block or inline-block. Firefox will handle it if it's displayed as the default inline. Making a negative margin will fix any padding issue.

.anchor:target {
    padding-top: 18vh;
    display: block;
    margin-top: -18vh;
    }

Accessibility-friendly way to hide anchor outlines in IE and Firefox

This solves the problem nicely for IE 8 and Firefox.

a:hover, a:active { outline: none; }

However there is something that took me forever to figure out: it won't work if the targets of the links do not point anywhere. This means that it won't work for something like <a href="#">.

Source.

Outline is drawn incorrectly on Chrome if outline-style is set to solid (and not auto)

... Set display:inline-block to your link, so layout is activated :)

test : http://codepen.io/gcyrillus/pen/GFzrs

I see no auto outline in FF 21.0

Proper HTML link formatting - can two inline block spans be inside of one a anchor tag?

I think this is what you are looking for.

• HTML 5 states that the element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".
• Usually no, but if set to display: inline you should be fine.

IE issue: cursor showing on overlay div while input in background

This problem seems to have been documented elsewhere, and would appear to be an IE bug: Cursor/caret bleeding through overlay in IE

But, here's a modified solution that will hopefully fit your needs - add this jQuery code to your page and it will take the focus away from the input if the overlay div is visible:

(function () {
    if ( document.documentMode && document.documentMode < 12 ) {
        $( document ).on( "focus", ":input", function ( event ) {
            if ($('div').is(':visible')) {
                event.target.blur();
            };
        });
    }
}());

Here's the modified JSFiddle for the answer: http://jsfiddle.net/qobvawr9/1/

Chrome issue when clicking on img inside a

As you've mentioned it looks to be a bug with Chrome.

I've played with the code a bit and this part seems to have been part of the issue:

ul li img {
    width: 150px;
    position: absolute;
    top: 0;
    left: 0;
}

I don't understand why clicking on the anchor causes this positioning to be dropped, but as a quick workaround you can just move the positioning into the anchor like so:

ul li a {
    text-decoration: none;
    -moz-opacity: 1;
    opacity: 1;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}
ul li img {
    width: 150px;
}

See the updated fiddle below.

https://jsfiddle.net/2d4b1mLm/5/

---

Related Topics