CSS 文本域和按鈕對齊不一緻解決方案

文字要包含在label标簽中，并設定行高，否則文字會與文本框的頂 端對齊。文本框要設定vertical-align:middle;否則文本框與button頂端對齊。button中文字垂直居中，要設定高和行高，行高要小于高。 

對input标記設定樣式，代碼如下： 

//HTML 代碼 

複制代碼 代碼如下:

<form> <input type="text" name="textfield" id="textfield" /> 

<input type="submit" name="button" id="button" value="送出" /> 

</form> 

//CSS 代碼 

複制代碼 代碼如下:

#textfield{border:1px solid #000;height:16px;} 

#button{background:#FFF;color:#000;border:1px solid #000;height:20px;} 

文本域設定高度 16px，按鈕高度需要設定 20px。按照 IE 的标準正常對齊，但在 Firefox 中文本域和按鈕高度是錯開的。 

此時通過對 input 标記設定左浮動 (float:left)，即可相容 Firefox，CSS 代碼如下： 

複制代碼 代碼如下:

#textfield{border:1px solid #000;height:16px;float:left;} 

#button{background:#FFF;color:#000;border:1px solid #000;height:20px;float:left;} 

當然，可以使用CSS Hack以更有針對性地控制浏覽器表現。