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

Question

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

这是我的工作:http://jsfiddle.net/bxTfn/18/

它似乎在 Chrome 和 IE 中工作，但提交按钮在 FF 中太短了 1px。

感谢您的帮助。

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

更新: http://jsfiddle.net/bxTfn/24/这似乎在 Chrome、FF 和 IE7 中有效，但在 IE8 和 IE9 中无效，因为提交会向下跳 1px。

Answer 1

box-sizing 可能是您正在寻找的:http://jsfiddle.net/23CE8/1/

这在 Chrome 和 IE8 中对我有用，但是 IE8 现在未对齐输入和提交按钮(尽管它们的高度相同)。为了解决这个问题，我向两个元素添加了 vertical-align: middle(尽管它可能在它们的父容器上)。

如果您希望 IE7 使用 box-sizing，您将需要一些 polyfill，Paul Irish 的博客中有一些链接:http://paulirish.com/2012/box-sizing-border-box-ftw/他还解释了一些优缺点。