CSS：提交按钮看起来比文本输入和文本区域小

Question

我刚注意到这种非常简单形式的奇怪渲染。

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

正如您所看到的，文本字段和按钮共享相同的样式，但它们的大小完全不同。

为什么会这样？

谢谢！

Answer 1

这是因为正在使用的框模型与<input type="submit">和<input type="text"> / <textarea>不同。您可以使用CSS指定框模型：

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

您可以在此处详细了解箱子型号：http://www.quirksmode.org/css/box.html

我编辑了你的jsFiddle以显示它正常工作：jsFiddle demo

Answer 2

我认为这是一个浏览器呈现问题...按钮的显示方式与文本输入不同。

要修复，请将此添加到您的css

form input[type="submit"]{
    width:273px;
}

示例： http://jsfiddle.net/jasongennaro/a9PLM/1/

Answer 3

在文本字段上填充可为其提供额外的空间。将输入和textareas的填充设置为0。

Answer 4

问题在于表单部分通常不会像普通的HTML元素一样呈现，并且样式化它们总是有点不可或缺。我会尝试避免这样的情况需要精确的大小调整，但如果你不能，那么就像这样拆分选择器：

    form textarea, form input[type=text]
    {
        width:250px;
        padding:10px;
    }
    form input[type=submit] { width: 270px }

请注意，我在宽度上添加了20 px（10 x 2）以补偿填充。

Answer 5

我使用过这种仅适用于CSS的解决方案，适用于IE，FF和Chrome。基本上，我们的想法是手动将输入元素的高度强制为大于标准框的值。对文本和按钮执行此操作：

• 将边距和填充设置为0。
• 将vertical-align设置为middle。
• 使用高度/宽度控制文本和按钮尺寸。文本高度必须比字体高度大几个像素（以覆盖标准框尺寸）。按钮的高度必须比文本大2个像素。

示例：

input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; }
input[type="submit"] { height:32px; }