在不同的浏览器中输入字段呈现的方式非常不同 [英] Input fields rendered very differently in different browsers

问题描述

好吧，所以我正在设计一个在网页右上角有登录表单的网站。我设置其输入字段的size属性，我得到一些有趣的结果。下面是一组我在一起的截图。我甚至为你们都堆了他们。我甚至为你们投掷一个 $ c> fields）。不同的浏览器使用不同的默认字体，字体大小和ppi度量，这意味着您将获得大小不同的大小（以像素为单位）的字段。

只是控件的初始宽度，如果浏览器决定在整个页面回传的过程中需要，可以随意调整控件大小。

为了甚至有希望使这个字段在不同的浏览器上接近相同（像素）大小，你必须使用CSS样式。话虽如此，也许有一个很好的理由，每个都是不同的大小 - 主要是与默认字体 - 如果你的像素限制字段的大小，这意味着一些浏览器将显示更多的实际文本。 / p>

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)?

解决方案

The size attribute sets the number of characters that the field will display (in the case of text and password fields). 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.

这篇关于在不同的浏览器中输入字段呈现的方式非常不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！