Переносимый HTML / CSS для вертикального выравнивания ввода type = image с вводом type = text?

Question

Я пытаюсь создать такую ​​форму с горизонтальной разметкой:

<form id="foo" name="foo" method="post" action="fooaction">
    <p>Enter a foo:
        <input type="text" id="fooText" name="fooText"value=""/>
        <input type="image" name="yes" id="fooSubmitYes" value="1" src="yes.png" title="Yes" width="24" height="24"/>
    <input type="image" name="no" id="fooSubmitNo" value="0" src="no.png" title="No" width="24" height="24"/>
    </p>
</form>

Проблема, с которой я столкнулся, заключается в том, что первый ввод, текстовое поле, хорошо совпадает с текстом «Введите foo:», но два других ввода очень плохо совмещаются с текстовым полем; они примерно на 7 пикселей выше. Поля и отступы для всех этих элементов установлены на 0.

Если я добавлю align = "middle" к входам изображения, то они сдвигаются на 12 пикселей вниз, так что они на 5 пикселей ниже, что поражает меня. Еще более странно, что свойство вертикального выравнивания CSS не влияет на входные элементы (они его игнорируют), поэтому мне сложно представить, как это исправить в CSS.

Кто-нибудь знает переносимый браузером способ создания формы с подписью, текстовым полем ввода и двумя отправками изображений с горизонтальным расположением и последовательным вертикальным выравниванием? Если нет, я бы согласился на то, что работает в Firefox :) (95% моих пользователей).

Answer 1

Добавление этого:

style='vertical-align: bottom'

элементам <input type="image"> хорошо выглядит в Firefox и IE.

То есть нижний край изображений совпадает с нижним краем поля ввода.

(Причина, по которой они «слишком высоки» по умолчанию, заключается в том, что нижний край встроенного изображения совпадает с базовой линией текста - промежуток под ним предназначен для размещения текстовых отступов: q, p, g и т. Д. )

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