input和button的高度不同

       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中的。