Как кроссбраузерно выровнять чексбоксы с их метками в один ряд?

Я тут потратил часок на поиск разных твиков и тестирование разных стилей разметки, и мне кажется, я нашёл неплохое кроссбраузерное решение твоего вопроса. Кроме того, я немного расширил задачу и поставил требования таким образом:

1. Каждое поле ввода (input) должно быть в своём собственном ряду.
2. Чекбоксы должны выравниваться вертикально (как это делают текстовые метки) во всех браузерах.
3. Если в метке много текста и он переноситься на новую страницу, то должен делаться отступ, то есть текст метки не должен попадать под чекбокс.

Сначала я покажу код, а затем сделаю пояснения к нему:

<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>

<style type="text/css">
label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
</style>

Этот код допускает использование какого-нибудь сброса CSS (например, от Эрика Маера), который не отменят внешние и внутренние отступы между элементами ввода. Конечно, в реальном проекте тебе скорее придётся их задать самостоятельно под свои нужды, а я просто хотел в своём ответе сохранить простоту.

Стоить принять во внимание следующее:

• Использование *overflow — это хак для IE (так называемый хак со звёздочкой). Он предназначен для 6-го и 7-го ослика, а Safari и Firefox совершенно проигнорируют его. Возможно, этот CSS будет считаться валидным, но всё же лучше спрятать этот хак под условный комментарий, в примере я не сделал этого для простоты.
• Насколько я понял, только одно выражение для вертикального выравнивания работает во всех браузерах: это «vertical-align: bottom». Поведение элементов и зависимых от них почти идентично в Лисице, Сафари и Ослике, разница в отображении сводится всего к парочке пикселей.
• Главная суть проблемы при работе с выравниванием — это то, что IE какого-то загадочного чёрта оставляет промежутки между элементами ввода. Это не внешние или внутренние отступы (margin и padding), это его личные выеб выходки. Но при задании высоты и ширины у чекбокса вместе со свойством «overflow» эти лишние отступы исчезают по тем же загадочным причинам, и поведение IE становиться подобным Сафари и Фаерфоксу.
• В зависимости от ширины твоего текста, тебе надо будет подогнать относительное позиционирование, ширину и высоту и так далее.

Надеюсь, это также поможет кому-то ещё. Я пока опробовал этот специфический прием только в одном проекте, над которым работал сегодня утром, так что, возможно есть и другие, возможно, более красивые решения.