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

Question

好的，所以我正在设计一个网站，该网站在网页的右上角有一个登录表单。我设置了它的输入字段的大小属性，我得到了一些有趣的结果。下面是我拼凑的一组截图。我什至为你们所有人堆放了它们。我什至扔了一个 jsFiddle为你们所有人。所以有四件事:

• 我根据堆叠图像中密码输入字段的右下角对齐它们。不要问为什么。
• 我设计的所有东西都带有边框，直到布局正确，然后我删除它们并添加颜色和图像等等。
• IE 9 屏幕截图基于 Adob​​e 的 BrowserLab，因为我在 Mac 上工作。
• 请注意，基于 WebKit 的浏览器(Safari 和 Chrome)呈现相同的大小。

经过一系列搜索后，我找不到任何可以揭示发生了什么的东西。也许是因为很难将这样的问题用简单的搜索词表达出来(或者至少对我而言)……

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

Answer 1

size 属性设置 number of characters该字段将显示(在 text 和 password 字段的情况下)。不同的浏览器使用不同的默认字体、字体大小和 ppi 测量值，这意味着您会获得大小(以像素为单位)大不相同的字段。

此外，正如规范所述，这只是控件的“初始”宽度，如果浏览器在重排整个页面的过程中决定需要调整控件的大小，则可以自由调整控件的大小。

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