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

标签 html css

我试图实现与文本字段旁边的提交按钮的完美对齐,每个按钮都有自己的字体大小。问题是我在不同的浏览器中得到不同的结果(我的网站支持 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/

相关文章:

html - 使 flex 元素向右浮动

javascript - 猫头鹰轮播图像幻灯片无法很好地调整大小

html - 列表流到一边

javascript - 具有自动高度的表单面板内的复合字段

html - 你如何避免 style = clear :both when using floating elements?

javascript - 如何使用 jQuery 在代码标记内添加 pre 标记?

html - 页脚占用剩余窗口高度的其余部分,但至少有指定数量的 px

javascript - 当事先不知道 Canvas 尺寸时,无法在 Canvas 上的正确位置绘图

css - 如何在导航栏中定位 <img>?

html - 如何在网页中制作全屏背景