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;

您可以在此处阅读有关盒子模型的更多信息：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

我编辑了你的 jsFiddle 以显示它的工作原理：jsFiddle 演示

Answer 2

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

要修复，请将其添加到您的 CSS 中

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

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

Answer 3

文本字段上的填充为其两侧提供了额外的空间。将输入和文本区域的填充设置为 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。
• 将垂直对齐设置为中间。
• 使用高度/宽度来控制文本和按钮尺寸。文本高度必须比字体高度大几个像素（以便覆盖标准框尺寸）。按钮的高度必须比文本大 2 个像素。

示例：

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