问题描述
我试图通过文本字段旁边的提交按钮实现完美对齐,每个都有自己的字体大小。问题是,我在不同的浏览器中得到不同的结果(我的网站支持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.
更新:
此似乎是在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.
推荐答案
调整大小可能是您要查找的内容:
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,有一个链接到保罗爱尔兰的博客在这里的一些:,他也解释了一些优点和缺点。
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.
这篇关于在高度相同的文本字段旁边的“提交”按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!