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