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

【问题标题】：CSS: Submit button looks smaller than text input and textareaCSS：提交按钮看起来比文本输入和文本区域小
【发布时间】：2011-09-25 02:23:32
【问题描述】：

我刚刚注意到一个非常简单的表单的这种奇怪呈现。

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

为什么会这样？

谢谢！

【问题讨论】：

【解决方案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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

文本字段上的填充使其两侧有额外的空间。将输入和文本区域的填充设置为 0。

【讨论】：

【解决方案4】：

问题在于表单部分通常不会像普通的 HTML 元素那样呈现，而且它们的样式总是有点碰运气。我会尽量避免这种需要精确大小的情况，但如果你不能，那么像这样拆分选择器：

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

请注意，我在宽度上添加了 20 像素 (10 x 2) 以补偿填充。

【讨论】：

【解决方案5】：

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

例子：

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

【讨论】：