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;

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

我添加了一个小提琴并意识到Firefox仍然需要-moz前缀：

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

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

Answer 2

你能试试吗

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

Answer 3

我认为这是因为textarea可以有一个滚动条，不同的浏览器会以不同的方式解释它。

我建议您只使用单独的宽度修复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/

CSS - 提交按钮显示的时间比文本输入短

3 个答案: