Постоянная граница и разность высот 1px вокруг элементов ввода

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

Даже если в этой картине их css

margin: 0;
padding: 0;

У них все еще есть тот небольшой запас, от которого я не могу избавиться. Я должен был использовать отрицательный запас -4px, чтобы кнопка оставалась близкой к текстовому полю.

Кроме того, при дальнейшем стилизации у меня возникает проблема между Firefox и Chrome: кнопки отправки, похоже, не имеют одинаковой высоты. Установка высоты, которая делает кнопку отправки, совместимой с панелью ввода в Chrome, разбивает ее на Firefox и наоборот. Кажется, что никакого явного решения нет.

1px разница между кнопками http://gabrielecirulli.com/p/20110702-170721.png

На изображении вы можете видеть, что в Chrome (справа) кнопка и поле ввода идеально вписываются в Firefox, они будут иметь разницу высот 1px.

Есть ли решение этих двух проблем (постоянный запас и разница 1px)?

РЕДАКТИРОВАТЬ: Я исправил первую проблему, это было вызвано тем фактом, что два элемента были разделены новой строкой в html-коде. Вторая проблема сохраняется, однако, как вы можете видеть здесь: выделив форму двух элементов, вы можете видеть, что в Firefox (слева) кнопка на 2px выше, чем в Chrome (справа)

Ответ 1

Попробуйте следующее: демонстрационная скрипта.

HTML:

<span><input type="text" /><input type="submit" /></span>

CSS

span, input {
    margin: 0;
    padding: 0;
}
span {
    display: inline-block;
    border: 1px solid black;
    height: 25px;
    overflow: hidden;
}
input {
    border: none;
    height: 100%;
}
input[type="submit"] {
    border-left: 1px solid black;
}

Протестировано на Win7 в IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Только IE7 терпит неудачу, поскольку он упрямо показывает обычный ввод в виде кнопки.

Ответ 2

Мне кажется, что ваш CSS мешает, где-то, с вашим макетом ввода.

Как вы можете видеть здесь http://jsfiddle.net/F3hfD/1/ то, что вы просите, можно без проблем.

Ответ 3

Для вашей второй проблемы см. Как reset стиль кнопки по умолчанию в Firefox 4 +

Ответ 4

Для аналогичной проблемы, когда я использовал изображение как тип кнопки = "отправить", и он был не совсем такой же высоты, как соседний с ним вход, я просто добавил это в контейнер двух указанных входов:

padding-bottom:1px;

Ответ 5

У меня был глификон в промежутке рядом с входом, который вставлял top: 1px. Поэтому я установил top: 0px on span, и проблема была исправлена. Но фактический ответ для потока является полностью конкретной проблемой, и пользователю необходимо лучше понять элементы и css, чтобы исправить это.