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

Question

我刚刚注意到这个非常简单的表单的奇怪渲染。

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

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

为什么会发生这种情况？

谢谢！

- willvv

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

- Rusty Fausak

---

这是我多年来困惑的事情的最简单解释，干杯！ - ConstantineK

Answer 2

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

要解决此问题，请将以下内容添加到您的 CSS 中

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

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

- Jason Gennaro

Answer 3

问题在于表单部件通常不像普通的HTML元素一样呈现，而且对它们进行样式设置总是有点靠运气。我会尽量避免这种需要精确尺寸的情况，但如果你不能避免，那么请按如下方式拆分选择器：

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

请注意，我将宽度增加了20像素（10 x 2）以补偿填充。

- Sajid

Answer 4

我使用了这个仅基于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; }

- Lambtron

Answer 5

文本字段上的填充会在两侧增加额外的空间。请将输入框和文本区域的填充设置为0。

- mikevoermans