谷歌浏览器中文本框光标居中和字体大小显示

快乐打工仔 分类:实例代码

通常情况下设置文本框中的字体垂直居中显示会使用以下代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<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属性,谷歌浏览器就可以和其他标准浏览器效果一致,利用特点写代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<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>

以上代码可以实现兼容各个主流浏览器的效果。

谷歌浏览器中文本框光标居中和字体大小显示,这样的场景在实际项目中还是用的比较多的,关于谷歌浏览器中文本框光标居中和字体大小显示就介绍到这了。

谷歌浏览器中文本框光标居中和字体大小显示属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容