Как совместить флажки и их метки последовательно в кросс-браузерах

Это одна из мелких проблем CSS, которая постоянно мучает меня. Как люди вокруг переполнения стека вертикально выровнять checkboxes и их labels последовательно кросс-браузер ? Всякий раз, когда я корректно выравниваю их в Safari (обычно используя vertical-align: baseline на input), они полностью отключаются в Firefox и IE. Исправьте это в Firefox, и Safari и IE неизбежно перепутались. Я трачу время на это каждый раз, когда кодирую форму.

Вот стандартный код, с которым я работаю:


Я обычно использую сброс Эрика Мейера, поэтому элементы формы относительно чисты от переопределений. Ждем любых советов или хитростей, которые вы можете предложить!

вопрос задан 20.11.2008
One Crayon
12047 репутация

37 ответов


  • 922 рейтинг

    После более чем часа настройки, тестирования и разметки разных стилей, я думаю, у меня может быть достойное решение. Требования для этого конкретного проекта были:

    1. Входы должны быть на отдельной линии.
    2. Флажки должны быть выровнены по вертикали с текстом метки одинаково (если не одинаково) во всех браузерах.
    3. Если текст метки переносится, он должен быть с отступом (поэтому не ставить его под флажок).

    Прежде чем я получу какое-либо объяснение, я просто дам вам код:

    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;
    }
    
    

    Вот рабочий пример в 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.
    • В зависимости от размера текста, вам, без сомнения, потребуется настроить относительное расположение, ширину, высоту и т. Д., Чтобы все выглядело правильно.

    Надеюсь, что это помогает кому-то еще! Я не пробовал эту конкретную технику на каких-либо проектах, кроме тех, над которыми я работал этим утром, поэтому определенно подготовьтесь, если найдете что-то, что работает более последовательно.

    ответ дан One Crayon, с репутацией 12047, 20.11.2008
  • 175 рейтинг

    Иногда для вертикального выравнивания требуются два встроенных (span, label, input и т. Д.) , , ) элементы рядом друг с другом для правильной работы. Следующие флажки правильно отцентрированы по вертикали в IE, Safari, FF и Chrome, даже если размер текста очень маленький или большой.

    Все они плавают рядом друг с другом в одной строке, но nowrap означает, что весь текст метки всегда остается рядом с флажком.

    Недостатком являются дополнительные бессмысленные теги SPAN.

    .checkboxes label {
      display: block;
      float: left;
      padding-right: 10px;
      white-space: nowrap;
    }
    .checkboxes input {
      vertical-align: middle;
    }
    .checkboxes label span {
      vertical-align: middle;
    }
    
    

    Теперь, если у вас был очень длинный текст метки, для которого требовалось для переноса без переноса под флажком, вы бы использовали отступ и отрицательный отступ текста для элементов метки:

    .checkboxes label {
      display: block;
      float: left;
      padding-right: 10px;
      padding-left: 22px;
      text-indent: -22px;
    }
    .checkboxes input {
      vertical-align: middle;
    }
    .checkboxes label span {
      vertical-align: middle;
    }
    
    
    ответ дан Nathan Bowers, с репутацией 807, 30.01.2009
  • 158 рейтинг

    Отработка решения One Crayon , у меня есть кое-что, что работает для меня и проще:

    input[type=checkbox], input[type=radio] {
      vertical-align: middle;
      position: relative;
      bottom: 1px;
    }
    
    input[type=radio] {
      bottom: 2px;
    }

    Отрисовывает пиксель за пикселем то же самое в Safari (базовый уровень которого я доверяю), и Firefox и IE7 проверяются как хорошие. Он также работает для шрифтов различных размеров, больших и маленьких. Теперь для исправления базовой линии IE на выборках и входах. , ,

    ответ дан dylanfm, с репутацией 5298, 5.04.2009
  • 118 рейтинг

    Одна простая вещь, которая, кажется, работает хорошо, состоит в том, чтобы применить корректировку вертикального положения флажка с вертикальным выравниванием. Это будет по-разному в разных браузерах, но решение несложное.

    input {
        vertical-align: -2px;
    }
    

    Ссылка

    ответ дан Frank Schwieterman, с репутацией 19293, 10.05.2010
  • 79 рейтинг

    попробуйте vertical-align: middle

    также ваш код выглядит так:

    
    
    ответ дан digitalsanctum, с репутацией 2511, 20.11.2008
  • 36 рейтинг

    Попробуйте мое решение, я попробовал его в IE 6, FF2 и Chrome, и он рендерил пиксель за пикселем во всех трех браузерах.

    * {
      padding: 0px;
      margin: 0px;
    }
    #wb {
      width: 15px;
      height: 15px;
      float: left;
    }
    #somelabel {
      float: left;
      padding-left: 3px;
    }
    
    
     
    ответ дан Waleed Eissa, с репутацией 4687, 28.12.2008
  • 24 рейтинг

    Единственное идеально работающее решение для меня:

    input[type=checkbox], input[type=radio] {
        vertical-align: -2px;
        margin: 0;
        padding: 0;
    }
    

    Проверено сегодня в Chrome, Firefox, Opera, IE 7 и 8. Пример: Скрипка

    ответ дан Buzogany Laszlo, с репутацией 696, 24.02.2015
  • 17 рейтинг

    Я обычно использую высоту строки, чтобы отрегулировать вертикальное положение моего статического текста:

    label {
      line-height: 18px;
    }
    input {
      width: 13px;
      height: 18px;
      font-size: 12px;
      line-height: 12px;
    }
    
    

    Надеюсь, что помогает.

    ответ дан Bryan A, с репутацией 3217, 20.11.2008
  • 12 рейтинг

    Я не полностью протестировал свое решение, но, похоже, оно работает отлично.

    Мой HTML просто:

    
    

    Затем я установил все флажки на 24px для высоты и ширины. Для выравнивания текста я делаю метку line-height также 24px и присваиваю vertical-align: top; следующим образом:

    РЕДАКТИРОВАТЬ: После тестирования IE я добавил vertical-align: bottom; к входу и изменил CSS метки. Возможно, вам понадобится условный регистр IE css для сортировки отступов, но текст и поле встроены.

    input[type="checkbox"] {
        width: 24px;
        height: 24px;
        vertical-align: bottom;
    }
    label.checkbox {
        vertical-align: top;
        line-height: 24px;
        margin: 2px 0;
        display: block;
        height: 24px;
    }
    

    Если кто-нибудь обнаружит, что это не работает, пожалуйста, дайте мне знать. Вот оно в действии (в Chrome и IE - извинения за скриншоты, сделанные на сетчатке и использующие параллели для IE):

    screenshot of checkboxes: Chrome screenshot of checkboxes: IE

    ответ дан Patrick, с репутацией 4018, 17.04.2013
  • 10 рейтинг

    Я думаю, что это самый простой способ

    input {
        position: relative;
        top: 1px;
    }
    

    Скрипка

    ответ дан gidzior, с репутацией 1022, 21.11.2013
  • 9 рейтинг

    Это хорошо работает для меня:

    fieldset {
      text-align:left;
      border:none
    }
    fieldset ol, fieldset ul {
      padding:0;
      list-style:none
    }
    fieldset li {
      padding-bottom:1.5em;
      float:none;
      clear:left
    }
    label {
      float:left;
      width:7em;
      margin-right:1em
    }
    fieldset.checkboxes li {
      clear:both;
      padding:.75em
    }
    fieldset.checkboxes label {
      margin:0 0 0 1em;
      width:20em
    }
    fieldset.checkboxes input {
      float:left
    }
    
    
    ответ дан dylanfm, с репутацией 5298, 30.01.2009
  • 8 рейтинг

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

    Я обнаружил, что vertical-align: sub делает флажки достаточно хорошо выровненными в Chrome, Firefox и Opera. Не могу проверить Safari, так как у меня нет MacOS и IE10 немного отключен, но я нашел, что это достаточно хорошее решение для меня.

    Другое решение может заключаться в том, чтобы попытаться создать конкретный CSS для каждого браузера и настроить его с помощью вертикального выравнивания в% / пикселях / EM: http: // css-tricks. ru / snippets / css / browser-specific-hacks /

    ответ дан pokrishka, с репутацией 694, 6.11.2014
  • 7 рейтинг

    Теперь, когда flexbox поддерживается во всех современных браузерах, что-то вроде этого кажется мне более простым подходом.

    
    
    
    


    Вот полная демонстрационная версия с префиксом:

    label {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
    }
    input[type=radio], 
    input[type=checkbox] {
            -webkit-box-flex: 0;
            -webkit-flex: none;
            -ms-flex: none;
            flex: none;
            margin-right: 10px; 
    }
    /* demo only (to show alignment) */
    form {
      max-width: 200px
    }
    
    
     
    ответ дан Bryan Willis, с репутацией 2404, 24.07.2016
  • 7 рейтинг

    У меня никогда не было проблем с этим:

            
    ответ дан John Topley, с репутацией 83554, 20.11.2008
  • 6 рейтинг

    Просто хотел добавить к обсуждению атрибута «for» на ярлыках (немного оффтоп):

    Пожалуйста, предоставьте его, даже когда в этом нет необходимости, потому что его очень удобно использовать из javascript:

    var label = ...
    var input = document.getElementById(label.htmlFor);
    

    Это гораздо удобнее, чем пытаться выяснить, вложен ли ярлык во входные данные, или же, если ввод перед меткой или после. , и т.п. И это никогда не повредит поставлять это. , так.

    Просто мои 2 цента.

    ответ дан dylanfm, с репутацией 5298, 19.06.2009
  • 6 рейтинг

    Если вы используете ASP. NET Web Forms Вам не нужно беспокоиться о DIV и других элементах или фиксированных размерах. Мы можем выровнять текст , установив float:left для типа ввода CheckboxList в CSS.

    Пожалуйста, проверьте следующий пример кода:

    .CheckboxList
    {
        font-size: 14px;
        color: #333333;
    }
    .CheckboxList input
    {
        float: left;
        clear: both;
    }
    

    . ASPX код:

    
    
    
    ответ дан Rama Subba Reddy M, с репутацией 579, 3.08.2011
  • 5 рейтинг

    Выбранный ответ с 400+ ответами не работал для меня в Chrome 28 OSX, возможно, потому, что он не был протестирован в OSX или что он работал во всем, что было в 2008 году, когда на этот вопрос был дан ответ.

    Времена изменились, и теперь возможны новые решения CSS3. Мое решение использует псевдоэлементы для создания пользовательского флажка . Таким образом, условия (плюсы или минусы, как ни крути) таковы:

    • Работает только в современных браузерах (FF3. 6+, IE9 +, Chrome, Safari)
    • Полагается на специально разработанный флажок, который будет отображаться одинаково в каждом браузере / ОС. Здесь я только что выбрал несколько простых цветов, но вы всегда можете добавить линейные градиенты и тому подобное, чтобы придать ему больше эффекта.
    • Приспособлен к определенному шрифту / размеру шрифта, который, если изменить, вы бы просто изменили расположение и размер флажка, чтобы он выглядел вертикально выровненным. При правильной настройке конечный результат должен быть практически одинаковым во всех браузерах / операционных системах.
    • Без свойств вертикального выравнивания, без поплавков
    • Должен использовать предоставленную разметку в моем примере, она не будет работать, если структурирована как вопрос, однако, макет по существу будет выглядеть одинаково. Если вы хотите переместить вещи, вам также придется переместить связанный CSS

    Ваш HTML:

    
    

    Ваш CSS:

    div.checkbox {
        position: relative;
        font-family: Arial;
        font-size: 13px;
    }
    label {
        position: relative;
        padding-left: 16px;
    }
    label::before {
        content :"";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: white;
        border: solid 1px #9C9C9C;
        position: absolute;
        top: 1px;
        left: 0px;
    }
    label::after {
        content:"";
        width: 8px;
        height: 8px;
        background-color: #666666;
        position: absolute;
        left: 2px;
        top: 3px;
        display: none;
    }
    input[type=checkbox] {
        visibility: hidden;
        position: absolute;
    }
    input[type=checkbox]:checked + label::after {
        display: block;
    }
    input[type=checkbox]:active + label::before {
        background-color: #DDDDDD;
    }
    

    Это решение скрывает флажок и добавляет и накладывает стили псевдоэлементов на метку, чтобы создать видимый флажок. Поскольку метка привязана к скрытому флажку, поле ввода все равно будет обновлено, а значение будет отправлено вместе с формой.

    jsFiddle: http: // jsfiddle. net / SgXYY / 6/

    А если вам интересно, вот мое мнение о переключателях: http: // jsfiddle. нетто / DtKrV / 2/

    Надеюсь, кто-то найдет это полезным!

    ответ дан MusikAnimal, с репутацией 1118, 19.08.2013
  • 4 рейтинг
    
    

    Хитрость заключается в том, чтобы использовать вертикальное выравнивание только в ячейках таблицы или встроенном блоке, если используется метка тега.

    ответ дан Carlo Pires, с репутацией 1782, 1.09.2011
  • 4 рейтинг

    Жестко задайте высоту и ширину флажка, удалите его отступы и сделайте его высоту плюс вертикальные поля равными высоте строки метки. Если текст метки встроен, установите флажок. Firefox, Chrome и IE7 + отображают следующий пример одинаково: http: // www. kornea. com / css-checkbox-align

    ответ дан Vladimir Kornea, с репутацией 1827, 7.08.2014
  • 4 рейтинг

    Если вы используете Twitter Bootstrap, вы можете просто использовать класс checkbox на

    ответ дан Sunil D., с репутацией 16752, 6.04.2013
  • 3 рейтинг

    С флажком типа ввода, завернутым в метку и смещенным влево, примерно так:

    
    

    это сработало для меня:

    label.checkbox {
        display: block;
    }
    .checkbox input {
        float: left;
        height: 18px;
        vertical-align: middle;
    }
    .checkbox span {
        float: left;
        line-height: 18px;
        margin: 0 0 0 20px;
    }
    

    Убедитесь, что высота равна высоте строки (уровень блока).

    ответ дан Matijs, с репутацией 2538, 14.01.2010
  • 3 рейтинг
    input[type=checkbox]
    {
        vertical-align: middle;
    } 
    
    
    ответ дан Prime, с репутацией 22, 13.06.2017
  • 2 рейтинг

    Используйте просто vertical-align: sub, так как Покришка уже предложена.

    Скрипка

    HTML Code:

    
    

    Код CSS:

    .checkboxes input {
        vertical-align: sub;
    }
    
    ответ дан Marco Sulla, с репутацией 7375, 30.07.2015
  • 2 рейтинг

    Обычно я оставляю флажок без метки, а затем делаю его «метку» отдельным элементом. Это больно, но между браузерами так много различий в том, как отображаются флажки и их метки (как вы заметили), что это единственный способ приблизиться к контролю того, как все выглядит.

    Я также заканчиваю тем, что делал это в разработке winforms, по той же причине. Я думаю, что основная проблема с элементом управления checkbox заключается в том, что это действительно два разных элемента управления: поле и метка. Используя флажок, вы оставляете на усмотрение разработчиков элемента управления решать, как эти два элемента отображаются рядом друг с другом (и они всегда ошибаются, где неправильно = не то, что вы хотите).

    Я действительно надеюсь, что у кого-то есть лучший ответ на ваш вопрос.

    ответ дан MusiGenesis, с репутацией 60340, 20.11.2008
  • 2 рейтинг

    Итак, я знаю, что на это уже много раз отвечали, но я чувствую, что у меня есть более элегантное решение, чем те, которые уже были предоставлены. И не только 1 элегантное решение, но и 2 отдельных решения, чтобы пощекотать ваше воображение. С учетом всего сказанного, все, что вам нужно знать и видеть, содержится в 2 JS Fiddle's с комментариями.


    Решение № 1 опирается на собственный «флажок» данного браузера, хотя и с изюминкой. , , Он содержится в элементе div, который легче позиционировать в кросс-браузерном режиме с переполнением: скрыт, чтобы разделить лишний флажок растянутой на 1 пиксель (это так, что вы не можете видеть уродливые границы FF)

    Простой HTML: (перейдите по ссылке, чтобы просмотреть css с комментариями, блок кода должен удовлетворить stackoverflow) http: // jsfiddle. net / KQghJ /

     Label text
    

    Label text
    

    ответ дан NinjaKC, с репутацией 578, 5.06.2014
  • 2 рейтинг

    CSS:

    .threeCol .listItem {
        width:13.9em;
        padding:.2em;
        margin:.2em;
        float:left;
        border-bottom:solid #f3f3f3 1px;
    }
    .threeCol input {
        float:left;
        width:auto;
        margin:.2em .2em .2em 0;
        border:none;
        background:none;
    }
    .threeCol label {
        float:left;
        margin:.1em 0 .1em 0;
    }
    

    HTML:

    
    
    
    

    Приведенный выше код поместит элементы списка в три протокола и просто изменит ширину в соответствии с вашими потребностями.

    ответ дан Philip Bevan, с репутацией 359, 2.03.2012
  • 1 рейтинг

    Следующее обеспечивает идеальную согласованность пикселей в браузерах, даже в IE9:

    Подход довольно разумный, до такой степени очевиден:

    1. Создайте вход и метку.
    2. Отобразите их как блоки, чтобы вы могли плавать их, как вам нравится.
    3. Установите одинаковые значения высоты и высоты строки, чтобы обеспечить их центрирование и выравнивание по вертикали.
    4. Для измерений em , чтобы вычислить высоту элементов, браузер должен знать высоту шрифта для этих элементов, и он не должен сам задаваться в измерениях em.

    Это приводит к общему применимому общему правилу:

    input, label {display:block;float:left;height:1em;line-height:1em;}
    

    С изменяемым размером шрифта для формы, набора полей или элемента.

    #myform input, #myform label {font-size:20px;}
    

    Протестировано в последних версиях Chrome, Safari и Firefox на Mac, Windows, Iphone и Android. И IE9.

    Этот метод, вероятно, применим ко всем типам ввода, которые не превышают одну строку текста. Примените правило типа, чтобы удовлетворить.

    ответ дан Henrik Erlandsson, с репутацией 2624, 16.09.2015
  • 1 рейтинг

    Yay спасибо! Это тоже сводило меня с ума навсегда.

    В моем конкретном случае это сработало для меня:

    input {
        width: 13px;
        height: 13px;
        padding: 0;
        margin:0;
        vertical-align: top;
        position: relative;
        *top: 1px;
        *overflow: hidden;
    }
    label {
        display: block;
        padding: 0;
        padding-left: 15px;
        text-indent: -15px;
        border: 0px solid;
        margin-left: 5px;
        vertical-align: top;
    }
    

    Я использую сброс. CSS, который может объяснить некоторые из различий, но это, кажется, работает хорошо для меня.

    ответ дан dylanfm, с репутацией 5298, 19.03.2009
  • 1 рейтинг

    position: relative; имеет некоторые проблемы в IE с z-index и анимациями, такими как jQuery slideUp / slideDown.

    CSS:

    input[type=checkbox], input[type=radio] {
        vertical-align: baseline;
        position: relative;
        top: 3px;
        margin: 0 3px 0 0;
        padding: 0px;
    }
    input.ie7[type=checkbox], input.ie7[type=radio] {
        vertical-align: middle;
        position: static;
        margin-bottom: -2px;
        height: 13px;
        width: 13px;
    }
    

    jQuery:

    $(document).ready(function () {
        if ($.browser.msie && $.browser.version <= 7) {
            $('input[type=checkbox]').addClass('ie7');
            $('input[type=radio]').addClass('ie7');
        }
    });
    

    Для стилей, вероятно, нужны настройки в зависимости от размера шрифта, используемого в

    ответ дан Bob Fanger, с репутацией 18218, 18.10.2010
  • 1 рейтинг
    
    
    checks for whatevers
     
    

    Вы должны в любом случае обернуть элементы управления формой, сгруппированные в их собственные наборы полей, здесь он воспроизводит обертку. установить ввод / метку для отображения: блок, плавающий ввод влево, плавающий метка вправо, установить ширину, контролировать интервалы с левыми / правыми полями, соответственно выровнять текст метки.

    т.

    fieldset.checks {
        width:200px
    }
    .checks input, .checks label {
        display:block;
    }
    .checks input {
        float:right;
        width:10px;
        margin-right:5px
    }
    .checks label {
        float:left;
        width:180px;
        margin-left:5px;
        text-align:left;
        text-indent:5px
    }
    

    вам, вероятно, нужно установить границы, контур и высоту линий на обоих, а также для кросс-браузерных / мультимедийных решений.

    ответ дан albert, с репутацией 7168, 30.12.2010
  • 0 рейтинг

    Может быть, некоторые люди делают ту же ошибку, что и я? Который был. , , Я установил ширину для полей ввода, потому что они были в основном типа «текст», но потом забыл переопределить эту ширину для флажков - поэтому мой флажок пытался занять много лишней ширины, и поэтому было сложно выровняйте ярлык рядом с ним.

    .checkboxlabel {
        width: 100%;
        vertical-align: middle;
    }
    .checkbox {
        width: 20px !important;
    }
    
    
    

    Предоставляет кликабельные метки и правильное выравнивание еще в IE6 (с использованием селектора классов) и в последних версиях Firefox, Safari и Chrome

    ответ дан Geoff Kendall, с репутацией 563, 29.05.2013
  • 0 рейтинг

    Это не лучший способ решить проблему

    vertical-align: middle
    

    Добавление style="position:relative;top:2px;" в поле ввода сместит его вниз на 2px. Таким образом, в зависимости от размера шрифта, вы можете перемещать его.

    ответ дан rene, с репутацией 9, 8.07.2010
  • 0 рейтинг

    Простое решение:

    
    

    Протестировано в Chrome, Firefox, IE9 +, Safari, iOS 9+

    ответ дан Dylan Sharhon, с репутацией 96, 28.08.2018
  • -1 рейтинг

    попробуйте этот код

    input[type="checkbox"] {
        -moz-appearance: checkbox;
        -webkit-appearance: checkbox;
        margin-left:3px;
        border:0;
        vertical-align: middle;
        top: -1px;
        bottom: 1px;
        *overflow: hidden;
        box-sizing: border-box; /* 1 */
        *height: 13px; /* Removes excess padding in IE 7 */
        *width: 13px;
        background: #fff;
    }
    
    ответ дан Web Designer cum Promoter, с репутацией 1087, 20.11.2013
  • -1 рейтинг

    Для согласованности с полями формы в разных браузерах мы используем: Размер коробки: Граница

    button, checkbox, input, radio, textarea, submit, reset, search, any-form-field {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    ответ дан Milche Patern, с репутацией 13578, 29.07.2013
  • -1 рейтинг

    Я нашел один способ сделать это, который дает тот же результат почти во всех браузерах. По крайней мере, современные браузеры. Работает в Firefox, Chrome, Safari, Opera. В IE это будет выглядеть почти так, как если бы не было правил, применяемых к входным данным или меткам (т.е. е. , он по-прежнему будет иметь метку на несколько пикселей ( ниже входных данных), поэтому я думаю, что это простительно.

    HTML

    
    

    CSS

    .boxfix {
        vertical-align: bottom;
    }
    .boxfix input {
        margin: 0;
        vertical-align: bottom;
        position: relative;
        top: 1.999px; /* the inputs are slightly more centered in IE at 1px (they don't interpret the .999 here), and Opera will round it to 2px with three decimals */
    }
    
    ответ дан user966939, с репутацией 476, 23.11.2012
  • -2 рейтинг
    input {
        margin: 0;
    }
    

    на самом деле делает трюк

    ответ дан James, с репутацией 11, 23.02.2010