为什么 input 元素能用 width 属性

  前几天在是写网页的时候发现input可以设置宽高，很疑惑，上网查了之后发现：

　简单的认为 input 就是 inline 元素是片面的。元素默认以何种 display 属性值显示出来，这个其实更多的时候是由浏览器决定的（不同浏览器的差异性，导致我们需要 reset CSS），下面是部分浏览器 input 元素默认 CSS：

IE6、IE7、IE8、IE9(部分)

background-color: #FFF;
border- 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px;
zoom: 1;

Webkit-r61376

input, textarea, keygen, select, button, isindex, datagrid {
margin: 0__qem;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0;
text-shadow: none;
display: inline-block;
text-align: -webkit-auto;
}
input[type="search"] {
-webkit-appearance: searchfield;
-webkit-box-sizing: border-box;
}

我们可以看到在IE中，input 默认样式 zoom:1; overflow: hidden;都是触发了 hasLayout 或者 Block formatting contexts。webkit 内核浏览器中是默认定义为 inline-block 的，firefox 和 opera 默认没有定义任何 display 属性值。所以 IE 中 input display 默认属性值并不是 inline-block，只是触发了 hasLayout 或者 BFC使其具有了 inline-block 类似的特性（可设置宽高）。webkit 中如果 input type=search，由于默认的 box-sizing 是 border-box，对其设置宽高和其他浏览器表现出来也是有差异的，所以有时候我们会重置为：

input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}