为什么输入字段使用font-style:italic减小宽度? [英] Why does an input field reduce width with font-style:italic?

查看:117
本文介绍了为什么输入字段使用font-style:italic减小宽度?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

font-style: italic;应用于HTML input标记时,该字段比其他字段要窄(计算宽度较小).

When applying font-style: italic; to an HTML input tag, the field is narrower (less computed width) than it otherwise would be.

最小的可复制示例:

<!DOCTYPE html>
<html lang="en">
<body>
    <input type="text" /><br>
    <input type="text" style = "font-style: italic;" /><br />
</body>
</html>

当另存为HTML并在Chrome中呈现时,它看起来像这样:
在其他浏览器中也是如此.

When saved as an HTML and rendered in Chrome, it looks like this:
It's similar in other browsers.

注意:当上述HTML作为Stack Overflow上的代码段运行时,此问题不可见.

Note: This issue isn't visible when the above HTML is run as a code snippet on Stack Overflow.

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

Why is this?
Is the factor by which one is narrower than the other constant across browsers?

推荐答案

这是HTML5规范的作用.

This is the effect of the HTML5 specification.

在呈现部分

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

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.

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

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浏览器将斜体字作为普通字符的单独字体,并应用了不同的平均值,因此使用了不同的总宽度.

That calculation means that the width of the input box depends on the character font. Chrome is taking italic as a separate font from normal characters and applying a different average value, and therefore a different total width.

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

You can see this further by altering the font-family for the input element. In some fonts, the italic version results in a longer box, in others, shorter.

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

Firefox and Edge currently don't use a different average for italic.

这篇关于为什么输入字段使用font-style:italic减小宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆