掃二維碼與項目經理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網交流
現(xiàn)在移動互聯(lián)網的浪潮一波又一波,很多企業(yè)和個人都開始注重自己的移動互聯(lián)網(當然很多是已經有了傳統(tǒng)的PC端的東西),比如我們最近接的很多項目都是傳統(tǒng)PC和移動端同步做的,這也說明了移動端在用戶心目中的重要性。
大家也清楚,因為很多移動設備上的瀏覽器都是一些現(xiàn)代瀏覽器,對HTML5和CSS3等新標準有著比PC上的一些老版本瀏覽器更好的支持,因此H5等技術標準也因此遍地開花。
而今天我們要講的一個問題就是:在安卓等移動瀏覽器中placeholder中的文字不垂直居中問題;首先我們開看看具體的問題是什么,來看一張對比圖片。(左邊是Chrome調試的效果,也就是說在Chrome是沒有問題的;右邊是在一臺安卓手機的瀏覽器中的效果 )。
通過上圖可以發(fā)現(xiàn),右邊的明顯有問題,也就是沒有達到我們預期的效果,我們要的是里面文字垂直居中,而這里卻沒有;總之,就是出了異常問題了。
其實這就是行距l(xiāng)ine-height造成的,我們一般來美化input會用height、padding、line-height等屬性,但這里如果用了line-height就會造成這種異常??梢杂胮adding等屬性來實現(xiàn)我們想要的效果,這里就是這么處理這個問題的。
我們來了解下placeholder,這是一個HTML5中新增加的一個屬性,placeholder 屬性提供可描述輸入字段預期值的提示信息(hint)。 該提示會在輸入字段為空時顯示,并會在字段獲得焦點時消失。placeholder 屬性適用于以下的 <input> 類型:text, search, url, telephone, email 以及 password。其實說白了,這里就可以替代我們在HTML5版本以前的時候我們使用JS來實現(xiàn)的一些效果。
我們在微信上24小時期待你的聲音
解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網交流