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

Question

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

这是我正在做的事情：http: //jsfiddle.net/bxTfn/18/

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

谢谢你的帮助。

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

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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/他也解释了一些优点和缺点。

2 回答 2