文字框谷歌游標和其他瀏覽器不一致解決方案

螞蟻小編發表於2017-03-16
谷歌瀏覽器

通常情況下我們希望文字框中的文字是垂直居中顯示的，在標準瀏覽器中，預設狀態就是垂直居中的。

但在IE8和IE8以下瀏覽器中卻不是這樣，所以要設定line-height屬性值或者line-height和height屬性值相同。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
input{
  width:200px;
  height:30px;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>

上面的程式碼在標準瀏覽器中，輸入的文字都是垂直居中的,但是IE8和IE8以下瀏覽器就不好用了。

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

上面程式碼實現全相容效果，但這個時候問題出現了，谷歌瀏覽器下，游標和其他瀏覽器的表現有很大差別。

下面介紹一下谷歌瀏覽器對游標的渲染規則:

1.當文字框沒有文字的時候，游標的高度就是line-height的高度。

2.如果有文字，那麼游標的高度就是從文字框頂端到文字低部的高度。

解決方案:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
input{
  width:200px;
  height:30px;
  line-height:normal; 
  line-height:30px\9;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>

使用hack進行一下相容性處理即可，程式碼非常的簡單。

相關文章