为什么输入字段会使用 font-style:italic 减小宽度？
Why does an input field reduce width with font-style:italic?
当将 font-style: italic; 应用到 HTML input 标签时，该字段比其他情况下更窄（计算宽度更小）。
最小可重现示例：
<!DOCTYPE html>
<html lang="en">
<body>
<input type="text" /><br>
<input type="text" style = "font-style: italic;" /><br />
</body>
</html>
保存为 HTML 并在 Chrome 中呈现时，它看起来像这样：
在其他浏览器中也是类似的。
注意：当上述 HTML 作为 Stack Overflow 上的代码片段 运行 时，此问题不可见。
这是为什么？
一个比另一个窄的因素在浏览器中是否恒定？
这是HTML5规范的效果。
在渲染部分14.5.5. The input element as a text entry widget.它说：
If an input element whose type attribute is [text] does not have a size attribute, then the user agent is expected to act as if it had a user-agent-level style sheet rule setting the 'width' property on the element to the value obtained from applying the converting a character width to pixels algorithm to the number 20.
The converting a character width to pixels algorithm returns (size-1)×avg + max, where size is the character width to convert, avg is the average character width of the primary font for the element for which the algorithm is being run, in pixels, and max is the maximum character width of that same font, also in pixels. (The element's 'letter-spacing' property does not affect the result.)
那个计算的意思是输入框的宽度取决于字符的字体。 Chrome 将斜体作为与普通字符不同的字体并应用不同的平均值，因此总宽度不同。
您可以通过更改输入元素的 font-family 来进一步了解这一点。在某些字体中，斜体版本导致方框变长，而在其他字体中，方框变短。
Firefox 和 Edge 目前不使用不同的平均斜体。
当将 font-style: italic; 应用到 HTML input 标签时，该字段比其他情况下更窄（计算宽度更小）。
最小可重现示例：
<!DOCTYPE html>
<html lang="en">
<body>
<input type="text" /><br>
<input type="text" style = "font-style: italic;" /><br />
</body>
</html>
保存为 HTML 并在 Chrome 中呈现时，它看起来像这样：
在其他浏览器中也是类似的。
注意：当上述 HTML 作为 Stack Overflow 上的代码片段 运行 时，此问题不可见。
这是为什么？
一个比另一个窄的因素在浏览器中是否恒定？
这是HTML5规范的效果。
在渲染部分14.5.5. The input element as a text entry widget.它说：
If an input element whose type attribute is [text] does not have a size attribute, then the user agent is expected to act as if it had a user-agent-level style sheet rule setting the 'width' property on the element to the value obtained from applying the converting a character width to pixels algorithm to the number 20.
The converting a character width to pixels algorithm returns (size-1)×avg + max, where size is the character width to convert, avg is the average character width of the primary font for the element for which the algorithm is being run, in pixels, and max is the maximum character width of that same font, also in pixels. (The element's 'letter-spacing' property does not affect the result.)
那个计算的意思是输入框的宽度取决于字符的字体。 Chrome 将斜体作为与普通字符不同的字体并应用不同的平均值，因此总宽度不同。
您可以通过更改输入元素的 font-family 来进一步了解这一点。在某些字体中，斜体版本导致方框变长，而在其他字体中，方框变短。
Firefox 和 Edge 目前不使用不同的平均斜体。