瀏覽器兼容--input標籤

 怎樣設置input標籤css樣式解決瀏覽器兼容問題

HTML裏的input標籤標籤用於蒐集用戶信息。根據不一樣的 type 屬性值，輸入字段擁有不少種形式。輸入字段能夠是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等。      雖然全部瀏覽器都支持input標籤，可是input標籤總不能得到跨瀏覽器的統同樣式。主要的問題有這麼兩個：一是input標籤的高度不能統一，一樣 的CSS樣式在Firefox和IE中的高度始終不能兼容；二是在IE瀏覽器中屬性爲text的input標籤中的輸入文字不像標準瀏覽器中的那樣垂直居 中顯示，而是靠輸入框的左上角顯示。       爲了完全解決Firefox和IE瀏覽器顯示搜索框的問題，我以軟件直銷網主題搜索框的樣式爲準，重寫了一遍代碼而且以像素爲單位測量了一下在沒有任何樣式表的狀況下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標籤css樣式解決瀏覽器兼容問題？先來看下面通過樣式化後，在不一樣瀏覽器中都有着良好表現的搜索框。總結一下，在給input標籤寫CSS時須要注意的有如下幾點：      1、不要給屬性爲text的input標籤設置高度，這樣沒法讓IE瀏覽器下輸入框中的文字垂直居中顯示。儘管你後來想要經過設置padding屬性來讓 文字居中，你會發現根本無法讓它在Firefox和IE中取得一致的效果。正確的作法是直接給input標籤設置padding屬性，經過內邊距屬性來調 節input標籤的高度，並且這時IE中的文字也是居中顯示的。      2、input標籤不會繼承父元素的字體樣式和大小，須要直接給input標籤聲明font-family和font-size屬性。      3、給屬性爲text的input標籤設置合適的width屬性和padding屬性，確保其中的文字在合適的範圍內出現。尤爲是使用了背景圖片後，要讓文字框的大小和背景圖片的大小至關，這樣看上去更加美觀。