Achtergrondelementen selecteerbaar via absoluut geplaatste link in IE9

Dus ik probeer een li-element in een klikbare link te maken door absoluut een element eroverheen te plaatsen met 100% hoogte en breedte. Dit werkte prima en was een relatief eenvoudige oplossing voor Chrome en FF, maar in IE9 zijn de andere elementen achter de link nog steeds selecteerbaar, zodat de link niet kan worden aangeklikt waar zich nog een ander element bevindt.

Here's a fiddle of the issue, which works as expected in Chrome and FF, but not in IE9: http://jsfiddle.net/DsshY/5/

Ik verwees eerst naar Maak een div-bestand in een link en probeerde een lege span in de link, maar dat werkte niet. Ik heb verschillende combinaties van posities en z-indexen geprobeerd en zelfs de andere inhoud in een div ingepakt met een z-index lager dan de link, maar om nog steeds niets te doen.

Ik hoop dat het gewoon iets eenvoudigs is dat ik mis, omdat ik liever geen gebruik meer hoef te maken van het gebruik van Javascript om op het li-element een 'link' te maken, hoewel ik weet dat dit waarschijnlijk een oplossing is.

1
Interessant als ik een achtergrondkleur aan de reeks in de link toevoeg, geen van de elementen erachter kan worden geselecteerd, zoals in jsfiddle.net/DsshY/6
toegevoegd de auteur justis, de bron
Dus het instellen van een achtergrondkleur en dekking op 0 zoals in jsfiddle.net/DsshY/7 lijkt eigenlijk als een oplossing die werkt in alle drie browsers, maar het lijkt een beetje hacky en niet de juiste manier om het te doen.
toegevoegd de auteur justis, de bron

1 antwoord

Dus het instellen van een achtergrondkleur en dekking op 0 zoals in jsfiddle.net/DsshY/7 lijkt eigenlijk een oplossing die werkt in alle drie de browsers. Dit lijkt een beetje hacky en niet de juiste manier om het te doen, maar hey, het werkt in IE8/9 en de nieuwste versies van Chrome en FF die ik heb getest.

In wezen heb ik uiteindelijk deze stijlen toegepast op de overspanning in mijn een element, waardoor het relatief gepositioneerde bovenliggende element feitelijk in een link werd omgezet:

a {
    position: relative;     
}

    a span {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 9;
        background-color: #FFF;
        opacity: 0;
        filter: alpha(opacity=0);
    }
1
toegevoegd