CSS：提交按钮看起来比文本输入和文本标记更小

Question

我刚注意到这个很简单形式的奇怪渲染。

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

正如你所看到的，文本框和按钮共享相同的样式，但它们的大小是相当不同的。

为什么会发生这种情况？

谢谢！

Answer 1

这是因为使用的箱型号与<input type="submit">和<input type="text">/<textarea>不同。

box-sizing: border-box; 
-moz-box-sizing: border-box; 

你可以阅读更多关于盒模型在这里：您可以通过使用CSS指定它们使箱的型号相同http://www.quirksmode.org/css/box.html

我编辑您的jsfiddle显示它的工作：jsFiddle demo

Answer 2

对文本字段进行填充可以在两侧留出额外的空间。设置输入和textareas的填充为0.

Answer 3

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

要修复，将它添加到你的CSS

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

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

Answer 4

的问题是，形式部分，一般不会呈现像普通的HTML元素，造型他们始终是一个一点点命中或未命中。我会试图避免这样需要精确尺寸的情况下，但如果你不能，那么分裂这样的选择：

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

注意，我加了20像素（10×2）的宽度弥补填充。

Answer 5

我我已经使用了这个仅适用于IE，FF和Chrome的CSS解决方案。基本上，这个想法是手动强制输入元素的高度大于标准框的值。这样做对文本和按钮：

• 设置边距和填充0
• 设置垂直对齐到中间。
• 使用高度/宽度来控制文本和按钮尺寸。文本高度必须比字体高度大几个像素（以覆盖标准框尺寸）。按钮高度必须比文字大2个像素。

实施例：

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