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

Question

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

Несмотря на то, что на этой картинке их css составляет

margin: 0;
padding: 0;

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

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

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

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

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

---

EDIT: Я исправил первую проблему, это было связано с тем, что два элемента были разделены новой строкой в ​​HTML-коде.Вторая проблема сохраняется, как вы можете видеть здесь: выделив форму двух элементов, вы можете увидеть, что в Firefox (слева) кнопка на 2px выше, чем в Chrome (справа)

Answer 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 не удается, так как он показывает упорно нормальную кнопку, как подать входной сигнал.

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

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

padding-bottom:1px;