CSS中input标签text与button设置同样高度却等高的原因
以前用CSDN都是用来下载文件，浏览博客，自从入了前端的坑，发现需要学习的东西很多很多，一面学习，一面找bug，记录一下无意间发现的bug 记录一下：）（ps：博客用的很不熟练，看来要多写写）
bug如下：
Quirks模式
先记录一下Quirks模式，百度了一下，有叫怪异模式，有叫兼容模式，嗯，怪异模式更加适合吧，手动再见，找了这么久的bug。
Quirks：新版本的浏览器故意模拟许多旧浏览器中的bug。嗯，简单来说，input元素属于行内块元素，在标准模式下，也就是在通用的模式下，给行内元素设置宽高，是不会生效的，而在Quirks模式下，会生效。—问题所在
问题代码
input[type=text]{
height:23px;
width:420px;
}
/*文本框设置高度为23 按钮设置高度为23 显示出来 缺不一样高*/
input[type=button]{
height:23px;
width:100px;
}
Quirks模式下的button计算
在Quirks模式下计算button的宽高：
button实际高度=height-padding-border
实际显示高度=23px
23px包含了paddind与border的值
所以button高度是23px，实际23px包含了按钮自带的内边距及边框的值
标准模式下的text计算
text实际显示高度=height+padding+border
实际显示高度=29px=23+1+1+2+2（包含了paading和border的值）
（内边距与边框是自带的）
结论
button与text的显示高度不同，由于处于的模式不同，button处于Quirks模式，text处于标准模式。
text属性的显示值= 原本高度+padding+border值
button属性的显示值= 原本高度（原本高度中包含了padding和border值）
解决办法
方法一：在button的原本高度上加上border和padding值，此时的border和padding值，可能是默认值，也可能是自定义的值（在text与button等高的情况下）
方法二：利用css3模型：
box-sizing: border-box;
给text属性加上此样式，即只计算width值，不算上padding与border值
欢迎大家指正，还是一个萌新，谢谢大家~