Сделать кнопку формы / текстовое поле одинаковой высоты во всех браузерах?

Question

У меня есть следующие css и html (детализированные до самого необходимого. Полный код с дополнительными стилями можно найти здесь: у меня есть этот css, который я вставил в jsfiddle: http://jsfiddle.net/BwhvX/, однако этого достаточно для воспроизведенияпроблема)

css:

* {
    margin: 0px;
    padding: 0px;
    font-size: 13px;
    line-height: 15px;
    border: none;
}
input[type="submit"]::-moz-focus-inner {
    border: 0;
}

#search .text, #search .button {
   border: 1px solid red;
}

html:

<form method="post" id="search" action="">
    <p><input type="text" class="text" value="" name="suche"><input type="submit" class="button" value="Suchen"></p>
</form>

Вот как Firefox отображает:

вот как визуализирует Chrome:

Я хочу, чтобы два элемента формы имели одинаковую высоту во всех браузерах.мне кажется, что применен какой-то стиль по умолчанию, который мне нужно вручную сбросить, как я сделал для Firefox в этом примере.В Chrome Developer Tools каждый имеет высоту 16 и высоту 17 px, но я не могу увидеть, откуда он взялся, он только что рассчитан.применяемые стили (которые мне показаны) одинаковы.

Answer 1

изменение:

*{
    line-height: normal !important;
}

или добавить что-то вроде:

input[type="submit"], input[type="text"] {
    line-height:normal !important;
}

не спрашивай почему)

и. Сафари нужны специальные исправления. но выглядит хорошо

Answer 2

Я нашел это в normalize.css , который решил это для меня:

// Removes inner padding and border in Firefox 4+.
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

Answer 3

Обычно один из них ниже работал для меня в прошлом с использованием браузера Firefox.

 vertical-align: bottom;
  vertical-align: top;

Answer 4

Попробуйте, дав

.text{
 border:0px;   
}

Answer 5

CSS3 имеет свойство box-sizing .Задав значение border-box , вы сообщаете браузеру, что ширина элемента и отступ элемента должны быть включены в высоту элемента, а затем можете легко установить саму высоту:

input {
    box-sizing: border-box;
    height: 15px;
}

Это работает и для html элементов .

Answer 6

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

Answer 7

Если вы укажете height вместо line-height, они будут отображаться правильно.высота ведет себя хорошо кросс-браузерно;высота строки не.