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

【问题标题】：CSS - submit buttons displayed shorter than text inputsCSS - 提交按钮显示比文本输入短
【发布时间】：2011-08-10 11:01:56
【问题描述】：

我的 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%;
}

我正在尝试同时输出文本输入和提交输入。然而，提交输入看起来比文本输入短几个像素.. 显然没有理由。

我用谷歌搜索了这个，没有运气。

有什么想法吗？

【问题讨论】：

标签： css forms input

【解决方案1】：

嗯，答案隐藏在现代浏览器的默认样式表中。这个问题与 CSS 的盒子模型有关。

基本上，input[type="text"]，textarea，一般大多数其他元素都有标准的盒子尺寸模式（'content-box'）。 input[type="submit"] 使用border-box sizing mode，被更少的元素使用。

将这行 css 添加到您的上述样式声明中：

 box-sizing:content-box;

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

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

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

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

【讨论】：

【解决方案2】：

你可以试试这个

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

【讨论】：

【解决方案3】：

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

我建议简单地用单独的宽度固定你的文本区域：

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%;
}

见小提琴：

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

【讨论】：