我试图实现与文本字段旁边的提交按钮的完美对齐,每个按钮都有自己的字体大小。问题是我在不同的浏览器中得到不同的结果(我的网站支持 IE7+ 和所有现代浏览器)。
这是我的工作:http://jsfiddle.net/bxTfn/18/
它似乎在 Chrome 和 IE 中工作,但提交按钮在 FF 中太短了 1px。
感谢您的帮助。
澄清:我希望文本框的字体大小为 14px,提交的字体大小为 12px。
更新: http://jsfiddle.net/bxTfn/24/ 这似乎在 Chrome、FF 和 IE7 中有效,但在 IE8 和 IE9 中无效,因为提交会向下跳 1px。
最佳答案
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/他还解释了一些优缺点。
关于html - 具有相同高度的文本字段旁边的提交按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11396290/