分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

css 布局

发布时间:2023-09-06 01:09责任编辑:蔡小小关键词:暂无标签

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
 

css 布局

原文地址:http://www.cnblogs.com/Tachi/p/7479951.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved