输入字段在不同浏览器中的呈现方式截然不同
好的，我正在设计一个网站，该网站在网页的右上角有一个登录表单。我设置了其输入字段的大小属性，并且得到了一些有趣的结果。下面是我整理的一组屏幕截图。我什至为你们所有人堆放了它们。我什至为大家提供了一个 jsFiddle 。所以有四件事：
- 我根据堆叠图像中密码输入字段的右下角对齐它们。别问为什么。
- 我在所有东西上设计边框，直到布局正确，然后删除它们并添加颜色和图像等等。
- 由于我使用的是 Mac，因此 IE 9 屏幕截图基于 Adobe 的 BrowserLab。
- 请注意，基于 WebKit 的浏览器（Safari 和 Chrome）呈现相同的大小。
经过一系列搜索后，我找不到任何可以揭示正在发生的事情的信息。也许是因为很难用简单的搜索词来表达这样的问题（或者至少对我来说）……
综上所述，我的问题是为什么输入字段的呈现方式如此不同，最重要的是，如何 我可以解决这个问题吗（最好不需要 JavaScript 或对用户代理的依赖）？
Okay, so I am in the process of designing a website which has a login form at the top-right corner of a webpage. I set the size attribute of its input fields and I am getting some interesting results. Below is a group of screenshots that I threw together. I even stacked them for you all. I am even throwing in a jsFiddle for you all. So four things:
- I aligned them based on the bottom right hand corner of the password input field in the stacked image. Don't ask why.
- I design with borders on everything until the layout is correct, then I remove them and add the colors and images and whatnot.
- The IE 9 screenshot is based on Adobe's BrowserLab since I am working on a Mac.
- Note that the WebKit-based browsers (Safari and Chrome) render the same size.
I could not find anything to reveal what is happening after a series of searches. Maybe it's because it's hard to word a question like this into simple search terms (or at least for me)…
With all of this said, my question is why is are the input fields rendered so differently, and most importantly, how can I remedy this (without JavaScript or the dependence on User Agents preferably)?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
size属性设置数字该字段将显示的字符数（在文本和密码字段的情况下）。不同的浏览器使用不同的默认字体、字体大小和 ppi 度量，这意味着您会得到尺寸（以像素为单位）截然不同的字段。此外，正如规范所述，这只是控件的“初始”宽度，如果浏览器决定在重排整个页面的过程中需要调整控件的大小，则可以自由调整控件的大小。
为了甚至希望使该字段在不同浏览器上接近相同（像素）大小，您必须使用 CSS 对其进行样式设置。话虽如此，这可能有一个很好的理由，即每个浏览器的大小都不同 - 主要与默认字体有关 - 如果您对字段的大小进行像素限制，这意味着某些浏览器将比其他浏览器显示更多的实际文本。
The
sizeattribute sets the number of characters that the field will display (in the case oftextandpasswordfields). Different browsers use different default fonts, font sizes, and ppi measures, meaning that you get massively different sized (in pixels) fields.Also, as the spec says, this is merely the "initial" width of the control, and the browser is free to resize the control if it decides it needs to in the course of reflowing the entire page.
To even have a hope of making this field close to the same (pixel) size on different browsers, you'll have to style it with CSS. That being said, there is probably a good reason that each of these are different sizes - mostly having to do with default fonts - and if you pixel-restrict the size of the field that means some browsers will display more actual text than others.