谷歌瀏覽器中文字框游標居中和字型大小顯示

admin發表於2017-10-18
谷歌瀏覽器

通常情況下設定文字框中的字型垂直居中顯示會使用以下程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">  
#text{  
  height:50px;  
  line-height:50px; 
  font-size:12px;
}  
</style>  
</head>  
<body>  
<input type="text" id="text" value="螞蟻部落歡迎您"/>  
</body>  
</html>

文字可以在文字框中垂直居中顯示，在IE和火狐瀏覽器中沒有任何問題，游標會大小和字型大小相同，但在谷歌瀏覽器中並非如此，當文字框沒有文字的時候，游標大小和文字框高度相同，輸入文字的時候，游標從文字底部到文字框頂部顯示。

特別說明:

在IE8以上、谷歌和火狐等瀏覽器中，line-height屬性不是必須的，預設情況下文字就是垂直居中對齊。

如果去掉line-height屬性，谷歌瀏覽器就可以和其他標準瀏覽器效果一致，利用特點寫程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">  
#text{  
  height:50px;  
  .line-height:50px;/*IE6、7、8識別*/
}  
</style>  
</head>  
<body>  
<input type="text" id="text" value="螞蟻部落歡迎您"/>  
</body>  
</html>

以上程式碼可以實現相容各個主流瀏覽器的效果。

相關文章