Tip: input sizing in IE

Weekend discovery (could be hot water for some)…Look at this example page. No CSS at all is applied to the first line of input fields. input { font-size: 1em; } is applied to the second line.

Now, open this in IE, and try setting your default text size to Largest and then to Smallest. You will see that first two fields do not change their size at all, while the second two obey. In few other browsers I tried, this does not happen.

What exactly is the core of the problem is unknown to me. One guess is that IE sets the predefined field size in pixels, and it is known fact that IE can’t resize pixels. When the unit is changed to ems, it works as you expect.

No matter what is the cause, this is the issue to watch for.