Chrome：输入文本元素在复制/粘贴后失去垂直对齐
Posted
技术标签:
【中文标题】Chrome：输入文本元素在复制/粘贴后失去垂直对齐【英文标题】：Chrome: input text element loses vertical alignment after copy / paste 【发布时间】：2012-06-18 12:31:27 【问题描述】：我在 Chrome 19 中的以下 html 代码中有问题。如果我从输入字段中复制文本“Hello”并将其粘贴到同一字段中，则文本的垂直对齐在顶部，但应该是在中间。
如果我从样式中删除 font-size 属性，效果不会出现。 这是浏览器的错误，还是我对样式属性做错了什么？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
</head>
<body>
<div style="width:200px;height:50px;">
<input type="text" style="width:100%;height:100%;font-size:1.75em;" value="Hello world!"/>
</div>
</body>
</html>
【问题讨论】：
Mac 上的 webkit 有同样的错误 【参考方案1】：此问题绝对是浏览器错误，但仍有办法修复它。对我有用的是在输入中添加一个行高，其值等于高度的值。
我以像素而不是百分比设置我的高度，当我尝试以百分比设置它们时，它似乎不起作用。不过，Ems 做到了。使用这种策略，您的代码可能看起来像：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
</head>
<body>
<div style="width:200px;height:50px;">
<input type="text" style="width:100%;height:2em;line-height:2em;font-size:1.75em;" value="Hello world!"/>
</div>
</body>
</html>
【讨论】：
+1 是一个可行的解决方案，但是当设置行高时，闪烁的光标和文本高亮在 所有 浏览器中都会上移，而不仅仅是 Chrome (我认为这更糟）。如果跨浏览器美学很重要，我不确定我会推荐这个解决方案......以上是关于Chrome：输入文本元素在复制/粘贴后失去垂直对齐的主要内容，如果未能解决你的问题，请参考以下文章
kindeditor富文本编辑器支持从word复制粘贴保留格式和图片的插件