在寫html表單的時候，發現了一個問題：input和button設置了一樣的寬高，但是顯示高度確不一致，先看代碼：
1 <style> 2 input,button{ 3 width:100px; 4 height: 60px; 5 } 6 </style> 7 <input type="text" value="測試"/> 8 <input type="button" value="按鈕"/> 9 <button>按鈕</button>
在谷歌瀏覽器中顯示如下：
很明顯的看出高度不一樣。這是由於button在高度計算上始終使用了Quirks模式。在Quirks模式下，邊框的計算是在元素的寬度內的，而不像標准模式一樣計算在外部（button的高度包含邊框的高度，而文本框text則不包含邊框高度。），所以需要加2行代碼-webkit-box-sizing:border-box;-moz-box-sizing:boder-box;如下：
1 <style> 2 input,button{ 3 -webkit-box-sizing:border-box; 4 -moz-box-sizing:boder-box; 5 width:100px; 6 height: 60px; 7 } 8 </style>
熊貓辦公https://www.wode007.com/sites/73654.html
現在高度就一致了：
box-sizing:border-box說明;
當我們設置box-sizing: border-box;時，border和padding則是被包含在寬高之內的。內容的寬和高可以通過定義的“width”和 “height”減去相應方向的“padding”和“border”的寬度得到。內容的寬和高必須保證不能為負，必要時將自動增大該元素border box的尺寸以使其內容的寬或高最小為0。
備注：除了上面方式外，我們還可以通過設置border:0;padding:0；或者根據Quirks模式的區別，設置不同的height值，同樣可以達到高度一致的效果