Всегда, даже работая в Студии, как-то обходил эту проблему стороной.
Но тут перфекфионизм взял верх и решил, наконец, сделать «круто». Вкратце, в чем состоит проблема — у одних браузеров (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 не сбрасывает. Потом будет проблематично их выровнять по высоте.
