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

我正在尝试输出文本输入和提交输入.然而,提交输入显示比文本输入短几个像素..显然没有理由.

我用谷歌搜索没有运气.

有任何想法吗？

Answer 1

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

基本上,输入[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/