css 布局

http://www.iyunlu.com/view/css-xhtml/64.html

 

 

 

 

作者：一丝
链接：https://www.zhihu.com/question/20495297/answer/15288789
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

我还是那句话，把某个事物简单的归结为单一的观点都是片面的。
1、楼主主观的认为 input 就是 inline 元素是片面的。
2、@丁小倪 说是 inline-block 也是不全面的，因为 IE8 之前 CSS2.0 标准中是没有 inline-block 这个概念的，但并不代表 IE6-7 不支持 inline-block 的某些特性，详见《inline-block 前世今生》http://www.iyunlu.com/view/css-xhtml/64.html。
3、元素默认以何种 display 属性值显示出来，这个其实更多的时候是由浏览器决定的（不同浏览器的差异性，导致我们需要 reset CSS），下面是部分浏览器 input 元素默认 CSS：
IE6、IE7、IE8、IE9(部分)

background-color: #FFF;
border-width: 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;
}

对于@李振洲 的答案无疑是不科学的，没有理论依据。W3C 的具体规范我就不引用了，可以自己去看看。

编辑于 2012-09-24