html - 为什么即使已经有填充，<input> 标签内的文本也会被截断？

Question

好的，所以我发现 <input> 中的文本即使 <input> 标签仍然被切断标签已经有一个填充。当您将字体样式设置为任何草书时，您会更加注意到这一点。

看看这张图片:

截图中的第一个文本框是type=text的输入，第二个文本框只是一个div。 input文本框截掉字符'j'的尾部，而div文本框则没有。

HTML:

<input type="text" value="juvenescent" />
<div>juvenescent</div>

CSS:

input, div {
  font-family: cursive;
  font-size: 2em;
  padding: 15px 20px;
  margin-bottom: 10px;
  width: 300px;
  border: 1px solid black;
}

div {
  background-color: white;
}

这是 jsfiddle 的链接: https://jsfiddle.net/9eLzqszx

这里的解决方法是什么？显然，我希望输入文本框的填充不会剪切其中的文本。

Answer 1

看起来 J 的曲线越过了浏览器认为是字母边缘的左侧。不要在两侧使用填充，而是在顶部/右侧/底部使用填充，而在左侧使用文本缩进，它应该可以解决问题!

input {
  font-family: cursive;
  font-size: 2em;
  padding: 15px 20px 15px 0;
  font-style:italic;
  margin-bottom: 10px;
  width: 300px;
  border: 1px solid black;
  text-indent: 20px;
}

https://jsfiddle.net/will0220/pxrs321f/3/