输入字段在不同的浏览器中呈现的方式非

Question

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

• 我根据堆叠图像中密码输入字段的右下角对齐它们。不要问为什么。
• 我设计了所有内容的边框，直到布局正确，然后我删除它们并添加颜色和图像等等。
• IE 9屏幕截图基于Adobe的BrowserLab，因为我正在使用Mac。
• 请注意，基于WebKit的浏览器（Safari和Chrome）的大小相同。

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

所有这些都说明了，我的问题是为什么输入字段的呈现方式如此不同，最重要的是，如何可以解决这个问题（没有JavaScript或最好依赖于用户代理）？

Answer 1

size属性设置字段将显示的number of characters（如果是text和password字段）。不同的浏览器使用不同的默认字体，字体大小和ppi度量，这意味着您可以获得大小不同（以像素为单位）的字段。

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

即使希望在不同的浏览器上使这个字段接近相同（像素）大小，你也必须使用CSS来设置它。话虽如此，可能有一个很好的理由，每个都是不同的大小 - 主要是与默认字体有关 - 如果你像素限制字段的大小，这意味着一些浏览器将显示比其他浏览器更多的实际文本。 / p>