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

Question

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

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

如您所见，文本字段和按钮共享相同的内容款式不同，但尺寸却有很大不同。

为什么会发生这种情况？

谢谢！

Answer 1

这是因为 和 使用的盒模型不同/ <文本区域>。您可以通过使用 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; }