CSS：提交按钮看起来小于文本输入和textarea [英] CSS: Submit button looks smaller than text input and textarea

问题描述

我只是注意到这个奇怪的渲染一个非常简单的形式。

I just noticed this strange rendering of a very simple form.

这是我的标记/ CSS：http://jsfiddle.net/a9PLM/

Here's my markup/CSS: http://jsfiddle.net/a9PLM/

如您所见，文本字段和按钮共享相同的样式，但它们的大小是非常不同。

As you can see, text fields and the button share the same styles but their size is quite different.

为什么会发生这种情况？

Why does this happen?

谢谢！

推荐答案

这是因为使用的框模型不同于< input type =submit> 和< input type =text> / < textarea> 。您可以通过使用CSS指定框模型来使框模型相同：

This is because of the box model being used is different for the <input type="submit"> and the <input type="text">/<textarea>. You can make the box models the same by specifying them with CSS:

box-sizing: border-box;
-moz-box-sizing: border-box;

您可以在这里阅读更多有关盒子模型的信息： http://www.quirksmode.org/css/box.html

You can read more about box models here: http://www.quirksmode.org/css/box.html

我编辑了您的jsFiddle以显示it work： jsFiddle demo

I edited your jsFiddle to show it working: jsFiddle demo

这篇关于CSS：提交按钮看起来小于文本输入和textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！