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

 简单的认为 input 就是 inline 元素是片面的。元素默认以何种 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;
}

最新文章

  1. mongodump 备份
  2. Services (服务)
  3. Mac上安装go环境
  4. c++ bind1st 和 bind2nd的用法
  5. 小记:事务(进程 ID 56)与另一个进程被死锁在 锁 | 通信缓冲区 资源上,并且已被选作死锁牺牲品。
  6. NOIP 2013 提高组 day2 积木大赛
  7. hdu 1950 最长上升子序列
  8. unbuntu下vnc和vnc2swf的使用
  9. 移植openssl
  10. Fedora 22(15以上版本)开机自启动脚本
  11. html中静态进度条的实现
  12. github上传流程图记录
  13. day2 编程语言介绍、Python运行程序的两种方式、变量
  14. C++ Primer 笔记——OOP
  15. 【node】mongoose的基本使用
  16. Django2.1.5使用xadmin打造适合国人的后台管理系统
  17. 还没被玩坏的robobrowser(5)——Beautiful Soup的过滤器
  18. Java 编程下字符串的 16 位、32位 MD5 加密
  19. 装载问题(load)
  20. Python学习之路day3-集合

热门文章

  1. AWS EC2首次使用VPS
  2. html5对密码加密
  3. cf #379div2
  4. Java 根据当前时间获取明天、当前周的周五、当前月的最后一天
  5. Mvc 提交表单的4种方法全程详解
  6. .net中excel遇到的一些问题
  7. WPF知识总结(一)
  8. iOS开发中关于像素的几个概念
  9. jquery.validate.js 表单验证简单用法
  10. oracle 函数写法 总结