申请时font-style: italic;到 HTMLinput标签，该字段比其他情况更窄（计算出的宽度更小）。
最小可重现示例：
<!DOCTYPE html>
<html lang="en">
<body>
<input type="text" /><br>
<input type="text" style = "font-style: italic;" /><br />
</body>
</html>
When saved as an HTML and rendered in Chrome, it looks like this:
It's similar in other browsers.
注意：当上述 HTML 作为代码片段在 Stack Overflow 上运行时，此问题不可见。
为什么是这样？
在各个浏览器中，一个比另一个窄的因素是否恒定？
这就是HTML5规范的效果。
在渲染部分14.5.5。作为文本输入小部件的输入元素。 https://html.spec.whatwg.org/multipage/rendering.html#the-input-element-as-a-text-entry-widget它说：
如果 type 属性为 [text] 的输入元素没有 size 属性，则用户代理的行为就像具有用户代理级样式表规则，将元素上的“width”属性设置为通过将字符宽度转换为像素算法应用到数字 20 获得的值。
将字符宽度转换为像素的算法返回 (size-1)×avg + max，其中 size 是要转换的字符宽度，avg 是运行算法的元素的主要字体的平均字符宽度，在像素，max 是同一字体的最大字符宽度，也以像素为单位。 （元素的“letter-spacing”属性不会影响结果。）
该计算意味着输入框的宽度取决于字符字体。 Chrome 将斜体作为与普通字符不同的字体，并应用不同的平均值，因此总宽度也不同。
您可以通过更改输入元素的字体系列来进一步了解这一点。在某些字体中，斜体版本会导致较长的框，而在其他字体中，斜体版本会较短。
Firefox 和 Edge 目前不使用不同的斜体平均值。