Искать текстовое поле и высоту / положение кнопки (CSS)

У меня проблема с окном поиска. Я пытаюсь сделать текстовое поле и кнопку одинаковой высоты, но я не могу понять это правильно во всех браузерах. Вот код: http://codepen.io/anon/pen/ygCFz. Этот метод отлично работает в Firefox, но не в Chrome.

Итак, что будет лучшим способом, чтобы иметь одинаковую высоту и положение как для текстового поля, так и для кнопки?

Спасибо!

// редактировать: потому что кто-то попросил код для дальнейшей ссылки, вот он: HTML

<form id="search" action="" method="get">
        <input type="text" name="search" class="sfield" value="search and go"/>
        <input type="submit" value="Search" class="sbutton"/>
</form>

CSS

input.sfield{
  background-color:#fff;    
    border-color:#cecece;
    border-style:solid;
    border-width:1px 0 1px 1px;
    font-size:0.9em;
    line-height:1em;
    height:26px;
}

input.sbutton{
    background-color:#d91515;
    height:inherit;
    border:none;    
    color:#fff;
    position:relative;
    left:-6px;
    bottom:-1px;
    height:28px;
}
Источник

4 ответа

Решение

Используйте отступ вместо высоты на элементах ввода. Высота строки должна быть точно такой же, как и размер шрифта для Firefox. Поэтому, если вы хотите, чтобы размер шрифта был 16px, установите высоту строки в 16px и добавьте отступ сверху и снизу. Для кнопки отправки используйте абсолютное позиционирование, чтобы быть уверенным, что оно будет сверху:0 и снизу:0. Просто добавьте padding-left для подтверждения ширины кнопки ввода на входе, и все готово!

#search {
    position:relative;
    display:inline-block;
}

input.sfield{
    background-color:#fff;  
    border-color:#cecece;
    border-style:solid;
    border-width:1px 0 1px 1px;
    font-size:0.9em;
    line-height:1;
    padding:5px;
    display:inline-block;
    padding-right:50px;
}

input.sbutton{
    background-color:#d91515;
    border:none;    
    color:#fff;
    position:absolute;
    top:0px;right:0px;bottom:0px;
    width:50px;
}
Источник

Вы можете установить свойство определенной высоты для обоих элементов или просто сказать Sbutton наследовать стили от Sfield.

<input type="submit" value="Search" class="sfield sbutton"/>

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

http://codepen.io/anon/pen/zBlwD

Источник

HTML:

<form id="search" action="" method="get">
    <input type="text" name="search" class="sfield" value="search and go"/><input type="submit" value="Search" class="sbutton"/>
</form>

CSS:

input.sfield{
    background-color:#fff;  
    border-color:#cecece;
    border-style:solid;
    border-width:1px 0 1px 1px;
    font-size:0.9em;
    line-height:0.9em;
    height:26px;
    margin: 0;
}

input.sbutton{
    background-color:#d91515;
    height:inherit;
    border: 1px solid #d91515;  
    color:#fff;
    position:relative;
    margin: 0;
    height:30px;
}
Источник

Ну, я надеюсь, что решение не так просто, но у вас есть height определяется дважды в вашем правиле для sbutton учебный класс:

input.sfield{
    background-color:#fff;  
    border-color:#cecece;
    border-style:solid;
    border-width:1px 0 1px 1px;
    font-size:0.9em;
    line-height:1em;
    height:26px;
}

input.sbutton{
    background-color:#d91515;
    height:inherit;  //that's one
    border:none;    
    color:#fff;
    position:relative;
    left:-6px;
    bottom:-1px;
    height:28px; //that's two
}

Посмотрите, что происходит, когда вы избавляетесь от одного. Он должен работать. Также взгляните на line-height Правило для вашего текстового поля. Если размер шрифта отличается от высоты строки, это объясняет, почему размеры отличаются. Firefox и Chrome используют разные преобразования из emс пикселей и наоборот.

Источник
Другие вопросы по тегам