用于将 type=image 的输入与 type=text 的输入垂直对齐的便携式 HTML/CSS？

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>

我遇到的问题是第一个输入文本框与文本“Enter a 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 垂直对齐属性不会影响输入元素”，但它对我有用 - 也许还有其他问题阻止了它对你有用。