IE9以下的input设置padding兼容问题的解决方案

问题：最近开发一个项目时发现，给input加上padding，在IE9以下浏览器中，会把原本的input宽度撑大的问题，也就是说，同样的代码，在IE9以下的浏览器中查看和在其他浏览器会不一样，这个细节问题在开发一些列表式的布局中会被设计师和测试人员紧追不舍，因为它永远不能在所有浏览器中和其他div或表单对齐。

原因：IE9以下的浏览器支持CSS2.1，而CSS2.1规定对于box-sizing的宽度高度行为是content-box，也就是说宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。所以设置padding之后，即使预先设定了input的width，它的width也会被padding扩大。而IE9以上的浏览器则对于对于box-sizing的宽度高度行为是border-box，即为元素设定的宽度和高度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

解决方案：​对input设置：box-sizing: content-box;