在高度相同的文本字段旁边的“提交”按钮 [英] Submit button next to textfield with same height

问题描述

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

I´m trying to achieve a perfect alignment with a submit button next to a text field, each with its own font size. The problem is that I get different results in different browsers, (my site is supporting IE7+ and all modern browsers).

这里是我的工作： a href =http://jsfiddle.net/bxTfn/18/ =nofollow> http://jsfiddle.net/bxTfn/18/

Here´s what I´m working on: http://jsfiddle.net/bxTfn/18/

这似乎是在Chrome和IE的工作，但提交按钮是1px太短的FF。

It seems to be working in Chrome and IE, but the submit button is 1px too short in FF.

感谢您的帮助。

澄清：我想要文本框的字体大小为14px，并提交12px。

CLARIFICATION: I want the text box to have font size 14px and the submit 12px.

更新：
http://jsfiddle.net/bxTfn/24/
此似乎是在Chrome，FF和IE7，但不是在IE8和IE9中的提交向下跳动1px。

UPDATE: http://jsfiddle.net/bxTfn/24/ This seems to be working in Chrome, FF and IE7 but not in IE8 and IE9 where the submit jumps down 1px.

推荐答案

调整大小可能是您要查找的内容： http://jsfiddle.net/23CE8/1/

box-sizing might be what you're looking for: http://jsfiddle.net/23CE8/1/

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

This worked for me in Chrome and in IE8, however IE8 now mis-aligns the input and the submit button (although they're the same height). I added vertical-align: middle to both elements (although it could be on their parent container) in order to resolve that.

如果你想要IE7使用box-sizing你需要一些polyfills，有一个链接到保罗爱尔兰的博客在这里的一些： http://paulirish.com/2012/box-sizing-border-box-ftw/ ，他也解释了一些优点和缺点。

If you want IE7 to use box-sizing you'll need some polyfills, there's a link to some here from Paul Irish's blog here: http://paulirish.com/2012/box-sizing-border-box-ftw/ he also explains some of the pros and cons.

这篇关于在高度相同的文本字段旁边的“提交”按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！