Question

将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中呈现时，它如下所示： datetime
在其他浏览器中也是如此。

注意：当上述HTML作为Stack Overflow上的代码段运行时，此问题不可见。

这是为什么？
在各个浏览器中，一个比另一个常数窄的因素是吗？

Answer 1

这是HTML5规范的效果。

在呈现部分14.5.5. The input element as a text entry widget.中，它表示：

如果类型属性为[文本]的输入元素不具有size属性，则预期用户代理的行为就好像它具有用户代理级样式表规则一样，该规则在页面上设置了'width'属性元素的值是通过将字符宽度转换为像素算法对数字20所获得的值。

将字符宽度转换为像素算法将返回（size-1）×avg + max，其中size是要转换的字符宽度，avg是该算法所针对元素的主要字体的平均字符宽度运行，以像素为单位，并且max是同一字体的最大字符宽度，也以像素为单位。（元素的'letter-spacing'属性不会影响结果。）

该计算意味着输入框的宽度取决于字符字体。 Chrome会将斜体作为与普通字符分开的字体，并应用不同的平均值，因此使用不同的总宽度。

您可以通过更改输入元素的字体系列来进一步了解这一点。在某些字体中，斜体版本会导致较长的框，而在另一些字体中，会导致较短的框。

Firefox和Edge当前没有使用不同的斜体平均值。

为什么输入字段使用font-style：italic减小宽度？

1 个答案: