最近發現input標籤是總不能獲得跨瀏覽器的統一樣式。主要的問題有這麼兩個：一是input標籤的高度不能統一，各瀏覽器不相容，Firefox和IE中的高度始終不能一致；二是在IE瀏覽器中屬性為text的input標籤中的輸入文字不像標準瀏覽器中的那樣垂直居中顯示，而是靠輸入框的左上角顯示。

為了徹底解決搜尋框的這些問題，我以GreenGaint主題搜尋框的樣式為準，重寫了一遍程式碼並且以畫素為單位測量了一下在沒有任何樣式表的情況下＜input>標籤在預設瀏覽器中的實際差別。

結果發現：input標籤在type為text時，在Firefox和Safari中的預設高度為22畫素（包括上下邊框）寬度為146畫素（包括左右邊框），而在IE中的預設高度為24畫素，而寬度卻和Firefox和Safari是一致的，也是146畫素。當 input標籤在type為submit時，在Firefox中的高度為23畫素（包括陰影），寬度為75畫素。在Safari中高度為21畫素，寬度為73畫素，在IE中高度為為25畫素、寬度為73畫素。

那麼在樣式化input標籤時又該注意哪些問題呢？先來看下面經過樣式化後，在不同瀏覽器中都有著良好表現的搜尋框。

示例

總結一下，在給input標籤寫CSS時需要注意的有以下幾點：

一、不要給屬性為text的input標籤設定高度，這樣無法讓IE瀏覽器下輸入框中的文字垂直居中顯示。儘管你後來想要通過設定padding屬性來讓文字居中，你會發現根本沒法讓它在Firefox和IE中取得一致的效果。正確的做法是直接給input標籤設定padding屬性，通過內邊距屬性來調節input標籤的高度，而且這時IE中的文字也是居中顯示的。

二、input標籤不會繼承父元素的字型樣式和大小，需要直接給input標籤宣告font-family和font-size屬性。

三、給屬性為text的input標籤設定合適的width屬性和padding屬性，確保其中的文字在合適的範圍內出現。尤其是使用了背景圖片後，要讓文字框的大小和背景圖片的大小相當，這樣看上去更加美觀。