<input type="text"> 时设置input的高度和border,最后元素的高度和宽度包含了border的值。
<input type="submit">时同样设置了input的高度和border宽度值,但是最后input显示的高度值仅为input css代码设定的高度值。
如下所示:CSS中Input height设置为18px,border设置了1px,但是最后input显示高度为18px,与旁边的input text高度没有对齐。
.rightarea .form .submit{width:50px;height: 18px;margin-top: 7px;border:1px solid gray;}
根据的css说明:
解决这个问题,可以运用box sizing。
在submit样式表中加入:box-sizing:content-box,最后的代码如下:
.rightarea .form .submit{ box-sizing: content-box;-moz-box-sizing: content-box;/* Firefox */-webkit-box-sizing: content-box;/* Safari */width:50px;height: 18px;margin-top: 7px;border:1px solid gray;}