input標籤寫CSS時需要注意的幾點

來源:互聯網
上載者:User

  飛魚的聲納頂部的搜尋方塊讓我頭疼了很長時間,原因是總不能獲得跨瀏覽器的統一樣式。主要的問題有這麼兩個:一是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屬性,確保其中的文字在合適的範圍內出現。尤其是使用了背景圖片後,要讓文字框的大小和背景圖片的大小相當,這樣看上去更加美觀。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。