Всегда, даже работая в Студии, как-то обходил эту проблему стороной.
Но тут перфекфионизм взял верх и решил, наконец, сделать «круто». Вкратце, в чем состоит проблема — у одних браузеров (ie, opera) есть некоторый отступ у чекбоксов и радиобаттонов (который нельзя ничем сбросить), у других нет.
Кусок исходного html-кода:
...
<dl>
<dt>
<label>Пол</label>
</dt>
<dd>
<div class="option">
<input type="radio" name="sex" id="sex-male" value="male" />
<label for="sex-male">мужской</label>
</div>
<div class="option">
<input type="radio" name="sex" id="sex-female" value="female" />
<label for="sex-female">мужской</label>
</div>
</dd>
</dl>
...
Решение для «нормальных» браузеров:
.option {
position: relative;
}
.option input {
position: absolute;
left: 0;
top: 0.69em; // Величина сдвига подобрана для line-height: 1.2
margin: -4px 0 0;
}
.option label {
margin-left: 18px;
}
Теперь нужно «разобраться» с ie и opera, имеющих пресловутые отступы. Начнем c ie:
.option input {
// margin: -7px 0 0 -3px;
}
Кто использует conditional comments — выносит вышестоящую конструкцию в файл стилей для ie.
Осталась opera. Долго искал какой-нибудь хак для нее, самым красивым, с моей точки зрения, оказался следующий (такую конструкцию не понимает ни один браузер, кроме opera):
html:first-child .option input {
margin: -7px 0 0 -3px;
}
И вуаля, везде красота! Даже при масштабировании шрифта.
P.S. Никогда не пишите в css конструкцию вида: * { padding: 0 }. Если вам, конечно не все равно, как выглядят ваши формы в Firefox. Firefox сбрасывает внутренний отступ у input, а у select не сбрасывает. Потом будет проблематично их выровнять по высоте.
9 комментариев:
Как раз недавно боролся с этой проблемой. После нескольких часов попиксельного подгона и шаманства с margin/padding наткнулся на довольно простой и гениальный трюк: достаточно установить у input и его label свойство vertical-align:middle;
Как-то так:
.container input, .container label {
vertical-align:middle;
}
Специально проверял по browsershots.org - во всех современных браузерах работает на ура, в некоторых экзотических браузерах, правда есть небольшие смещения.
А можно пример увидеть с vertical-align? Насколько я помню, это, все-таки, не везде работает
Ну, чтобы далеко не ходить, из Ваших же примеров работы zform:
http://www.nomos.ru/personal/autocredit/form/
Открыл в firefox3 (под macos) и вижу что чекбоксы и, особенно, радиобаттоны находятся выше чем лэйблы
При таком решении если лейбл длинный и переносится на две строчки, то вторая строчка подлезет под чекбокс/радобатон.
Добавь display: block для label
>> Добавь display: block для label
Тогда будет пустота кликаться возле лейбла, что мне не нравится :)
Я короче убрал margin-left у label и добавил padding-left у .option. И для IE еще zoom у .option
К слову сказать, если вам когда-нибудь понадобится заблокировать чей-либо сотовый телефон или другое средство связи, то воспользуйтесь для этого Блокираторы мобильной связи.
Спасибо за ценный код - вставил почти не меняя, все работает. если есть граммар-наци, то я - дезигн-наци :)
Отправить комментарий