IE 8 и ниже не запускают щелчок по элементам, которые имеют отображение: none; Любое обходное решение?

Проблема связана с Internet Explorer 8 и ниже. Нашли достойное рабочее решение.

Вопрос

Internet Explorer 8 и ниже не запускают событие click(), установленное jQuery (или даже может быть встроенным, не уверенным) на элементы <input />, у которых есть свойство CSS, display установлено на none. Он работает в Internet Explorer 9, Mozilla Firefox и Google Chrome. Weird. Это как код и есть ли работа для Internet Explorer 8 и ниже?

Контекст

При нажатии input задается стиль display: none;. И функция задается в click событии input. Поскольку весь материал находится внутри label, он вызывает событие click на input, когда нажал label. Вы можете считать это своего рода симпатичным селектором, скрывая input.

label неявно передает событие click в первый input по умолчанию, и именно это я и хочу использовать здесь. Я не хочу, чтобы пользователи видели уродливый input здесь. Ожидаемое поведение браузера, но не работает.

HTML

<ul>
    <li>
        <label>
            <input type="button" value="Button 1" />
            Hello! This is a list item #1.
        </label>
    </li>
    <li>
        <label>
            <input type="button" value="Button 2" />
            Hello! This is a list item #2.
        </label>
    </li>
    <li>
        <label>
            <input type="button" value="Button 3" />
            Hello! This is a list item #3.
        </label>
    </li>
</ul>​

Точный CSS, вызвавший проблему

ul li,
ul li label {display: block; padding: 5px; cursor: pointer;}
ul li label input {display: none;}
ul li {border-bottom: 1px solid #ccc;}
ul li:hover {background-color: #eee;}​

JavaScript

$(document).ready(function(){
    $("input").click(function(){
        alert("Hey you! " + $(this).attr("value"));
    });
});​

Fiddle: http://jsfiddle.net/qSYuP/

Обновление # 1: Попробовал присвоить атрибут for:

<label for="btn1">
    <input type="button" value="Button 1" id="btn1" />

Все еще не работает!

Обновление # 2: Прочитано CSS visibility: hidden;:

ul li label input {visibility: hidden;}

Разбивка макета. Но все равно не работает!

Обновление # 3: Прочитано CSS position: absolute;:

ul li label {overflow: hidden;}
ul li label input {position: absolute; left: -99em;}

Работает! Я не в состоянии использовать overflow: hidden;, серьезно пойман!

Обновление # 4: ручное включение функции click():

$(document).ready(function(){
    $("input").click(function(){
        console.log("Hey you! " + $(this).attr("value"));
    });
    $("label").click(function(){
        $(this).find("input").click();
    });
});

Хорошо, IE 8 выходит из стека после печати LOG: Hey you! Button 3 для 1209 раз!

LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
SCRIPT28: Out of stack space 

Работает бесконечно! Должна быть проблема с моим script!

Решение: вид дерьмового исправления, но сделал трюк!

Поскольку это потому, что IE 8, поддерживающий opacity, мне пришлось использовать display: inline-block; с opacity: 0;.

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

Теперь окно input скрыто, буквально. Это исправление предназначено только для IE 8!

Пришлось исправить использование 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;
}

Fiddle: http://jsfiddle.net/VSQbD/

Ответы

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

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;
}