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

У меня есть очень маленькая, но трудная (для меня) проблема.

У меня есть текстовый ввод и кнопка отправки. Мне нужно, чтобы они были точно такой же высоты, и это могло быть верно для Chrome и Firefox, в идеале интернет-проводник.

HTML

<input type="text" name="email" /><input type="submit" value="»" />

CSS

input[type=text] {
    width: 218px;
}

input[type=submit] {
    background: #000;
    color: #fff;
}

input[type=submit], input[type=text] {
    padding: 9px;
    font-size: 18px;
    line-height: 18px;
    float: left;
    border: 0;
    display: block;
    margin: 0;
}

Я установил этот базовый код на jsfiddle здесь.

Вы должны заметить, что если вы загрузите его в chrome, кнопка будет меньше высоты, чем ввод текста, а в firefox - больше.

Что мне не хватает?

Ответы

Ответ 1

Удалите/добавьте line-height: 18px; для обоих.

Ответ 2

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

input[type=text] {height: 60px;}
input[type=submit] {height: 78px;}

Ответ 3

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

input[type=submit], input[type=text] {
  font-size: 18px;
  line-height: 18px;
  float: left;
  border: 0;
  display: block;
  margin: 0;
  height: 30px; /* or whatever height necessary */
}

Кроме того, вы можете сохранить прописку слева и справа на вашей кнопке следующим образом.

input[type=submit] {
  background: #000;
  color: #fff;
  padding: 0px 9px;
}

Ответ 4

input {
 height: 19px;
 }

Это может быть? Также удалите свойство заполнения. http://jsfiddle.net/xkeshav/e6aTd/1/

Ответ 5

Может быть, это дополнение, которое создает проблемы. Попробуйте удалить прокладку, установив кнопку на фиксированную высоту и сделайте смещение с высотой линии.

Ответ 6

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

jsfiddle

Ответ 7

Удаление/добавление line-height: 18px; для обоих не является идеальным решением, потому что я вижу небольшую высоту разницы в firefox...

Лучшее решение, которое я нашел, - установить div arround и установить его стиль на display: flex.

Все идеально подойдет.

    body {
        background: #ccc;
    }
    div{
        display: flex;
    }
    input[type=text] {
      width: 218px;
    }
    input[type=submit] {
      background: #000;
      color: #fff;
    }
    input[type=submit], input[type=text] {
      padding: 5px;
      font-size: 25px;
      border: 0;
      margin: 0;
    }

    <div><input type="text" name="email"  /><input type="submit" value="»" /></div>

Ответ 8

TRY

body {
    background-color: #ccc;
}

input[type=text] {
  width: 218px;
}

Рабочая DEMO