html – 在不同浏览器中呈现的输入字段差别很大

好的,所以我正在设计一个网页,它在网页的右上角有一个登录表单.我设置了输入字段的size属性,我得到了一些有趣的结果.下面是我拼在一起的一组截图.我甚至为你们堆叠了它们.我甚至为你们所有人扔了 jsFiddle.所以有四件事：

>我根据堆叠图像中密码输入字段的右下角对齐它们.不要问为什么.
>我设计了所有内容的边框,直到布局正确,然后我删除它们并添加颜色和图像等等.
> IE 9截图基于Adobe的browserLab,因为我在Mac上工作.
>请注意,基于WebKit的浏览器(Safari和Chrome)呈现相同的大小.

在一系列搜索之后,我找不到任何可以揭示正在发生的事情.也许是因为很难将这样的问题写成简单的搜索术语(或者至少对我而言)……

综上所述,我的问题是为什么输入字段的呈现方式如此不同,最重要的是,我如何解决这个问题(没有JavaScript或最好依赖于用户代理)？

解决方法

size属性设置字段将显示的 number of characters(在文本和密码字段的情况下).不同的浏览器使用不同的默认字体,字体大小和ppi度量,这意味着您可以获得大小不同(以像素为单位)的字段.

此外,正如规范所说,这仅仅是控件的“初始”宽度,如果浏览器在回流整个页面的过程中决定需要,则浏览器可以自由调整控件的大小.

甚至希望在不同的浏览器上使这个字段接近相同(像素)大小,你必须使用CSS来设置它的样式.话虽如此,可能有一个很好的理由,每个都是不同的大小 – 主要是与默认字体有关 – 如果你像素限制字段的大小,这意味着一些浏览器将显示比其他浏览器更多的实际文本.