button在高度计算上始终使用了Quirks模式。在Quirks模式下,边框的计算是在元素的宽度内的,而不像标准模式一样计算在外部(button的高度包含边框的高度,而文本框text则不包含边框高度。) quirks模式是什么?
HTML
<form>
<label class="d" >姓名<input type="text" class="a" /></label>
<label class="d">学号<input type="text" class="b" /></label>
<input type="button" value="提交" class="c" />
</form>
1.如果css是
<style>
div,body,form,input,label{margin:0;padding: 0;}
body{ font-family: "微软雅黑"}
.a,.b,.c{border: 5px solid #ccc; width: 100px;height: 100px; }
.c{font-family: "微软雅黑"}
</style>
我不会传照片。直接描述了。第三个框明显要比前两个小
2.如果css是
<style>
div,body,form,input,label{margin:0;padding: 0;}
body{ font-family: "微软雅黑"}
.a,.b,.c{border: 5px solid #ccc; width: 100px;height: 100px; }
.c{height: 110px;width: 110px;font-family: "微软雅黑"}
</style>
效果图就是。。。三个框大小一样
总结就是在文本框中 width是不包括border的,而在button中border是包含在width和height中的。