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演示

Answer 2

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

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

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

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

Answer 3

我已经使用了这个仅适用于CSS，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; }

Answer 4

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

Answer 5

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

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

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