便携式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个像素，因此它们的像素太低，这让我很难理解。更令人困惑的是，CSS垂直对齐属性不影响输入元素（他们忽略它），所以我很难想象如何在CSS中解决这个问题。

有谁知道一个浏览器便携的方式来制作一个带有标题，输入文本框和两个提交图像的水平布局和一致的垂直对齐的图像吗？如果没有，我会解决的东西在Firefox中工作:)（95％的用户）。

Answer 1

添加此：

style='vertical-align: bottom' 

到<input type="image">元素看起来不错，我在Firefox和IE。

这使得图像的底部边缘与输入框的底部边缘对齐。

（默认情况下，它们“太高”的原因是内嵌图像的底边与文本的基线对齐 - 下面的间隙是为了容纳文本分隔符：q，p，g等）

我不确定是什么让你说“CSS垂直对齐属性不影响输入元素”，但它适用于我 - 也许还有一些其他问题阻止它为你工作。