我們先對對input標記設定樣式，代碼如下：
html 代碼
<form> <input type=”text” name=”text1” id=”text1” />
<input type=”submit” name=”button” id=”button” value=”提交” />
</form>
CSS 代碼
#text1{border:1px solid red;height:20px;}
#button{background:#FFFFFF;color:blue;border:1px solid #000;height:24px;}
文本域設置高度 20px，按鈕高度需要設置 24px。按照 IE 的標准正常對齊，但在 Firefox 中文本域和按鈕高度是錯開的。
此時通過對 input 標記設定左浮動 (float:left)，即可兼容 Firefox，CSS 代碼如下：
#text1{border:1px solid #000;height:20px;float:left;}
#button{background:#FFFFFF;color:#blue;border:1px solid #000;height:24px;float:left;}
當然，可以使用CSS 以更有針對性地控制瀏覽器表現。
小結：button在高度計算上始終使用了Quirks模式。在Quirks模式下，邊框的計算是在元素的寬度內的，而不像標准模式一樣計算在外部，所以在text和button上同時設置邊框就會得到button的高度比text小的現象。所以文本框要與button按鈕對齊，button的高度是要高於文本text的高度的。（button的高度包含邊框的高度，而文本框text則不包含邊框高度。）