对input设置height在非ie浏览器下失效

对input控件设置CSS属性时，如果对其高度height进行设置后，在IE上可以正确显示，但是如果在Safair、Chrome、Firefox等WebKit为核心的浏览器上却实效。

/* 这样设置只对IE有效，对其他内核的浏览器无效 */

input {

height:30px

}

兼容性问题一直是比较麻烦的，要解决这个问题，就需要给控件CSS属性添加一个-webkit-box-sizing属性和一个-moz-box-sizing属性，然后添加height属性，这样就可以兼容所有浏览器了。

-webkit-box-sizing和-moz-box-sizing属性的值有：content-box | padding-box | border-box | inherit

这两个的属性的设置对所有元素都有效，是为了让所有的元素都能够接受width和height属性，要设置input的高度，这里就需要选择border-box属性值，设置如下：

/* 兼容WebKit核心和IE核心的浏览器 */

input {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

height:150px

}