Google Chrome input 自定义高度和行高后输入文字前光标上移错位

php · 发表于 2014/10/17 04:00

自从 Google Chrome 37-38 中如果对一个文本输入框定义了height和line-height，并且他们的值相同，那么在输入文字前 Google Chrome 文本输入框的光标会向上移动到输入框的左上方，造成错位，而不是在input中间。
以下代码在Google Chrome 37-38里面将会造成input光标上移错位，如图所示。

<!DOCTYPE html>
<html>
<head>
<style>
input{
height:4em;
line-height:4em;
}
</style>
</head>
<body>
<input type="text" id="51-n.com" placeholder="SearchText" />
</body>
</html>

复制代码

解决Google Chrome光标上移的方法是直接把line-height给删除掉。

<!DOCTYPE html>
<html>
<head>
<style>
input{
height:4em;
}
</style>
</head>
<body>
<input type="text" id="51-n.com" placeholder="SearchText" />
</body>
</html>

复制代码

账号		自动登录	找回密码
密码			新建账号

[CSS] Google Chrome input 自定义高度和行高后输入文字前光标上移错位

本帖子中包含更多资源

相关帖子