IE 8 and below not triggering click on elements which have display: none; Any workaround?

Question

The issue is with Internet Explorer 8 and below. Have found a decent working solution.

Issue

Internet Explorer 8 and below is no

Answer 1

Kind of crappy fix, but did the trick!

Since it is because IE 8, which supports opacity, I had to use display: inline-block; with opacity: 0;.

ul li label input {
    opacity: 0;
    width: 0px;
    height: 0px;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
}

Now the input's box is hidden, literally. This fix is only for IE 8!

Tried using the IE 8 Hack:

ul li label input {
    opacity: 0\9;
    width: 0px\9;
    height: 0px\9;
    display: inline-block\9;
    padding: 0\9;
    margin: 0\9;
    border: 0\9;
}

Answer 2

Could you not position the element absolute, but set it's left property to something like -99999px?

Answer 3

different browsers interpret display:none differently. display:none actually means the element should disappear, making the jquery difficult to find in the DOM.

a better way is to use visibility:hidden and then use click method

Answer 4

I think this is pretty straightforward. You just have to use click handlers on visible items. If you want a click on the <label> or the <li> to work when the <input> object is hidden and you want it to work in all browsers, then you just need to put a click handler on either the <label> or the <li> because that is a visible object that will receive the click when the <input> is hidden.

Answer 5

Your code is pretty much incorrect..

• input inside label ?
• Events are suppose to bubble up and not downwards
• and its so simple.. if you want to know when li was clicked attach an handler to that and not to input

in your updated 4 you could do an event.stopPropagation for 'input` click and that would solve infinity problem

Answer 6

Never been hit by this as I do things slightly differently anyway - click on the label does input.checked = !input.checked; return false;, then have a "change" event on the input (rather than a click event).