比如，有这个一个demo页面：
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no, address=no, email=no, time=no">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
<title>Title</title>
<style>
.text-input{
font-size: 1.2rem;
line-height: 1.2rem;
height: 1.2rem;
border: 1px solid #eee;
-webkit-appearance: none;
}
</style>
</head>
<body>
<h2>input type="text"中输入emoji表情时表情被截掉一部分的bug</h2>
<input class="text-input" type="text" name="comment">
</body>
</html>
当你在手机上(比如iPhone 5S)浏览这个页面，并在页面的输入框中输入一些中文内容的同时再输入几个emoji表情的时候, 会发现emoji表情无法完整显示,看起来就像有一部分被裁切掉了。
问题发现了，处理起来就比较简单了——加大行高, 比如, 加大到1.5rem。这个问题不难, 之所以收录进来，是因为自测的时候,很容易忘记对emoji表情这种特殊的输入进行测试验证，从而最终导致bug的存在。
时间： 2024-10-03 15:05:53