CSS - кнопки отправки отображаются короче, чем текстовые вводы

Question

Мой CSS выглядит следующим образом:

input,textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 15px;
    color:#779EC0;
    display: block;
    padding: 4px;
    margin-top:10px;
    border: solid 1px #85b1de;
    background-color: #EDF2F7;
    width:100%;
}

Я пытаюсь вывести как текстовый ввод, так и ввод ввода.Тем не менее, отправка ввода выглядит на несколько пикселей короче, чем ввод текста ... по всей видимости, без причины.

Я гуглил это без удачи.

Есть идеи?

Answer 1

Ну, ответ скрыт в таблицах стилей по умолчанию в современных браузерах.Проблема относится к блочной модели CSS.

В основном, input [type = "text"], textarea, как правило, большинство других элементов имеют стандартный режим определения размера блока ('content-box').input [type = "submit"] использует режим определения размера рамки, который используется меньшим количеством элементов.

Добавьте эту строку CSS к описанному выше объявлению стиля:

 box-sizing:content-box;

Thisпереопределит значения по умолчанию для таблицы стилей браузера и установит все эти элементы на content-box, что устранит проблему с размером*

 box-sizing:content-box;
 -moz-box-sizing:content-box;

http://jsfiddle.net/vXFDN/2/

Answer 2

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

Я бы порекомендовал просто исправить текстовую область с отдельной шириной:

input,textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 15px;
    color:#779EC0;
    display: block;
    padding: 4px;
    margin-top:10px;
    border: solid 1px #85b1de;
    background-color: #EDF2F7;
    width:100%;
}

textarea
{
    width:98%;
}

См. Скрипку:

http://jsfiddle.net/Curt/VJTMF/1/

Answer 3

Можете ли вы попробовать это

 input[type=submit] {
  //your style for button type submit
 }