css - 尝试对齐跨度和输入

Question

我有两个按钮，一个实现为输入，另一个实现为跨度。它们并排放置:

{ display:inline-block; }

按钮是从自定义标签呈现的，类名是在 jsp 中动态添加的。在 css 中，有一些阴影、背景渐变、填充和字体的定义。他们确实使用了一些 CSS3，例如 border-radius。

但是在Firefox中，span按钮的高度是18，而input是20。有趣的是，在IE 8中它们的高度都是25px，为什么？

现在我需要它们具有相同的高度并水平对齐。

更新:现在我在 jsfiddle 中有了这两个按钮。使用高度:22px；和垂直对齐:顶部；不会有太大帮助。

http://jsfiddle.net/gBeCP/

Answer 1

尝试在 input 标签上设置 vertical-align:top。我建议特别以 px 为单位设置尺寸，因为这会阻止浏览器应用默认值。