细说button

今天偶然遇到一个问题：当button和img同时在一行时，button下沉，不如趁此机会好好了解button的属性。

  

• button标签的type属性：

submit	The button is a submit button (this is default for all browsers, except Internet Explorer)默认提交行为
button	The button is a clickable button (this is default for Internet Explorer)什么也不做
reset	button具备重置表单的行为

在 IE6 IE7 IE8(Q) 中默认type为button，不具备提交功能；在 IE8(S) Firefox Chrome Safari Opera 中默认type为submit，可以提交。

注：当使用局部刷新（ajax）时，系统就会将ajax提交自动转换为submit提交，即局部刷新转成全部刷新，因此，该类页面中的按钮一定要设定属性：type='button'

• button高度计算

button在高度计算上始终使用了Quirks模式（详情请看：怪异模式）。在Quirks模式下，边框的计算采用IE盒模型，即在元素的width和height内包含border和padding；此外在Quirks模式下，一些内敛（inline）元素在设置垂直对齐时是对齐在盒子底部而不是盒内文字的基线，因此出现了上述不对齐现象。

• 解决办法

将img和button样式中设置vertical-align:middle;

 

 

 

 

 

 

 

 

 

 

参考：https://my.oschina.net/marina1216/blog/756225