CSS - 提交按钮显示比文本输入框短

Question

我的CSS如下：

input,textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 15px;
    color:#779EC0;
    display: block;
    padding: 4px;
    margin-top:10px;
    border: solid 1px #85b1de;
    background-color: #EDF2F7;
    width:100%;
}

我想要输出一个文本输入框和一个提交按钮，但提交按钮的高度似乎比文本输入框短了几个像素。

我已经在谷歌上搜索了这个问题，但没有找到解决方法。

有什么想法吗？

- Thomas Clowes

Answer 1

嗯，答案隐藏在现代浏览器的默认样式表中。该问题涉及CSS的盒子模型。

基本上，input[type="text"]、textarea和大多数其他元素都具有标准的框尺寸模式（“content-box”）。 input[type="submit"]使用边框框尺寸模式，这种模式被更少的元素使用。

将此行CSS添加到您上面的样式声明中：

 box-sizing:content-box;

这将覆盖浏览器样式表默认值，并将所有这些元素设置为content-box，这将解决您的大小问题。

---

我添加了一个小工具，发现Firefox仍然需要-moz前缀：

 box-sizing:content-box;
 -moz-box-sizing:content-box;

http://jsfiddle.net/vXFDN/2/

- John Green

Answer 2

你能试试这个吗？

 input[type=submit] {
  //your style for button type submit
 }

- nidhin

Answer 3

我认为这是因为文本区域可以有滚动条，而不同的浏览器对此的解释不同。

我建议只需使用单独的宽度来修复您的文本区域：

input,textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 15px;
    color:#779EC0;
    display: block;
    padding: 4px;
    margin-top:10px;
    border: solid 1px #85b1de;
    background-color: #EDF2F7;
    width:100%;
}

textarea
{
    width:98%;
}

请参见 Fiddle：

http://jsfiddle.net/Curt/VJTMF/1/

- Curtis