提交具有相同高度的文本字段旁边的按钮

Question

我正在尝试使用文本字段旁边的提交按钮实现完美对齐，每个按钮都有自己的字体大小。问题是我在不同的浏览器中得到不同的结果（我的网站支持IE7 +和所有现代浏览器）。

以下是我的工作：http://jsfiddle.net/bxTfn/18/

它似乎在Chrome和IE中运行，但提交按钮在FF中的时间过短。

感谢您的帮助。

澄清：我希望文本框的字体大小为14px，提交的是12px。

更新 http://jsfiddle.net/bxTfn/24/ 这似乎适用于Chrome，FF和IE7，但不适用于IE8和IE9，提交速度下降1px。

Answer 1

在您的小提琴中，您CSS的以下更改似乎完美排列：

input[type=text] {
    height: 18px;
    font-size: 14px;    
}

input[type=submit] {
    font-size: 14px;
    height: 20px;
}​

Answer 2

框大小可能正是您所寻找的：http://jsfiddle.net/23CE8/1/

这在Chrome和IE8中对我有用，但IE8现在错误地对齐输入和提交按钮（尽管它们的高度相同）。我为这两个元素添加了vertical-align：middle（虽然它可以在它们的父容器上），以便解决这个问题。

如果你想让IE7使用盒子大小，你需要一些polyfill，这里有Paul Irish的博客链接到这里：http://paulirish.com/2012/box-sizing-border-box-ftw/他还解释了一些优点和缺点。