Я только заметил странное поведение в IE7.
У меня есть переключатели со связанными метками следующим образом:
<input type="radio" name="filter" id="filter_1" value="Activities" checked="checked" />
<label for="filter_1">Activities</label>
<input type="radio" name="filter" id="filter_2" value="Services" />
<label for="filter_2">Services</label>
Радиокнопка скрыта через css с дисплеем: нет или видимость: скрыто (не спрашивайте)
Проблема заключается в том, что когда я нажимаю метку в IE7 (пока не смотрел другие версии IE), связанный переключатель не проверяется на самом деле. Я подтвердил это с помощью jquery - событие щелчка на ярлыке запущено, но событие щелчка переключателя нет. Сообщение формы также подтверждает, что проверенный переключатель не изменяется.
Это корректно работает в firefox, а также корректно работает, если я удаляю CSS, который скрывает радиокноны.
Является ли это ошибкой IE или что-то мне не хватает?
Вероятно, это связано с display: none - вы также можете обнаружить, что скрытые элементы не получают свои значения, представленные вместе с остальной частью формы. Если у вас есть контроль над ним, вы можете попробовать позиционировать элементы с экрана, а не скрывать их.
Это ответ на вики, чтобы собрать все разные ответы и варианты.
Вариант 1: Переместить элемент за пределы экрана, а не полностью скрывать его
position: absolute;
top: -50px;
left: -50px;
Вариант 2: Используйте бит JavaScript для установки переключателя при проверке щелчка метки
$("label").click(function(e){
e.preventDefault();
$("#"+$(this).attr("for")).click().change();
});
Вариант 3: Установите ширину элемента и/или непрозрачность в ноль
width: 0;
/* and/or */
-moz-opacity:0;
filter:alpha(opacity:0);
opacity:0;
outline:none; /* this prevents IE8 from having the line around it even though it invisible */
Вариант 4: Использовать другой браузер:)
В принципе, спецификация для этих вещей конкретно не указывает, какое поведение следует использовать, но IE обычно занимает позицию, что если ее не видно, то она не работает. "Видеть" и "работать" может означать разные вещи, но в этом случае это означает, что когда display:none установлено, метка не активирует переключатель, что приводит к обычным обходным решениям, необходимым для стольких вещей в IE.
Эта проблема существует в IE6, 7, 8 и даже в текущей 9-бета-версии. В качестве исправления позиционирование переключателя с выключенным экраном является хорошей идеей.
Здесь альтернатива, которая не должна включать конструктор или css: Скрыть кнопку в обычном режиме и сделать любую функцию обработкой события click для кнопки также обработать событие click для метки.
Это работает для меня
width: 0px;
Протестировано в IE7 и IE8. Чистый CSS без javascript.
$("label").click(function(e){
e.preventDefault();
$("#"+$(this).attr("for")).click().change();
});
Спасибо за это. Я добавляю его в качестве ответа здесь, чтобы люди не упускали из виду ваш комментарий.
Заменить
style="display:none;"
с
style="-moz-opacity:0;filter:alpha(opacity:0);opacity:0;"
Вы можете попробовать это для IE7,8:
input{
position: absolute;
z-index: -1;
}
вместо
input{
display: none;
}
Есть хорошая компиляция ваших предложений:
input {
-moz-opacity:0;
filter:alpha(opacity:0);
opacity:0;
position: absolute;
}
вместо:
display: none;
Я использовал функцию jQuery hide(), поэтому было нелегко изменить способ скрыть элемент, не записывая более сложный код.
Я нашел эту идею:
Я использую класс для хранения проверенного атрибута и снова устанавливаю этот атрибут непосредственно перед отправкой.
if ($.browser.msie && $.browser.version == 7.0) {
$('input[type=radio]').click(function() {
$('input[name="'+$(this).attr("name")+'"]').each(function(){
if ($(this).attr("checked")){
$(this).addClass("checked");
}else{
$(this).removeClass("checked");
}
});
});
$('form').submit(function(){
$('input.checked').each(function(){
$(this).attr("checked","true");
});
});
}
Он работает как прелесть в моем случае.