После более чем часа настройки, тестирования и разметки разных стилей, я думаю, у меня может быть достойное решение. Требования для этого конкретного проекта были:
- Входы должны быть на отдельной линии.
- Входные данные флажков должны выравниваться по вертикали с текстом метки одинаково (если не одинаково) во всех браузерах.
- Если текст метки переносится, его необходимо сделать с отступом (поэтому не ставить его под флажок).
Прежде чем я приведу какое-либо объяснение, я просто дам вам код:
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;
}
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>
Вот рабочий пример в JSFiddle .
В этом коде предполагается, что вы используете сброс, такой как Эрик Майер, который не переопределяет поля формы ввода и отступы (следовательно, вводит сброс полей и отступов в CSS ввода). Очевидно, что в реальной среде вы, вероятно, будете вкладывать / переопределять материал для поддержки других элементов ввода, но я хотел, чтобы все было просто.
На что обратить внимание:
- Объявление
*overflow - это встроенный взлом IE (взлом свойства star). И IE 6 и 7 заметят это, но Safari и Firefox будут правильно игнорировать это. Я думаю, что это мог бы быть действительный CSS, но вам все еще лучше с условными комментариями; просто использовал его для простоты.
- Насколько я могу судить, единственное утверждение
vertical-align, которое было одинаковым для всех браузеров, было vertical-align: bottom. Установка этого и затем относительное позиционирование вверх в Safari, Firefox и IE вела себя почти одинаково с разницей в один или два пикселя.
- Основная проблема в работе с выравниванием заключается в том, что IE накапливает загадочное пространство вокруг элементов ввода. Это не отступы или отступы, и это чертовски настойчиво. Установка ширины и высоты для флажка, а затем
overflow: hidden по какой-то причине обрезает дополнительное пространство и позволяет позиционированию IE действовать очень похоже на Safari и Firefox.
- В зависимости от размера текста, вам, без сомнения, потребуется настроить относительное расположение, ширину, высоту и т. Д., Чтобы все выглядело правильно.
Надеюсь, это поможет кому-то еще! Я не пробовал эту конкретную технику на каких-либо проектах, кроме тех, над которыми я работал этим утром, поэтому определенно подготовьтесь, если найдете что-то, что работает более последовательно.