HF1002: 不能以 size 属性精确控制 INPUT 文本框或密码框的宽度
标准参考
根据 W3C HTML4.01 规范中的描述，当INPUT元素的 "type" 属性值为 "text" （文本框）或 "password" 时（密码框）， "size" 属性可以使输入框的宽度能够显示指定数目的字符。
关于 "size" 属性的详细信息，请参考 HTML 4.01规范 17.4 中的内容。
问题描述
字体样式会影响根据 INPUT 元素的 "size" 属性计算的文本框宽度。其中包括 "font-family" 、 "font-size" 、 "font-weight" 、 "font-style" 、 "letter- spacing" 等。而在不同的浏览器中，INPUT[type=text/password] 的默认样式也是不同的。
造成的影响
若仅仅为 INPUT 元素设置 "size" 属性，却没有显式地设定宽度，则在不同的浏览器中 INPUT 元素会出现不同的宽度，可能导致布局上的差异。
受影响的浏览器
| 所有浏览器 |
|---|
问题分析
在具体分析 size 属性对 INPUT 元素计算宽度的影响之前，先了解一下 INPUT[type=text/password] 元素的默认字体样式。1
下面统计 INPUT[type=text] 元素在各浏览器中默认字体样式的差异：
| IE6 IE7 IE8 @GB23122 | IE6 IE7 IE8 @UTF-8 | Firefox | Chrome | Safari | Opera | |
|---|---|---|---|---|---|---|
| font-family | SimSun | Arial | SimSun | Arial | SimSun | 宋体 |
| font-size | 10pt3 | 10pt | 13px | 13px | 13px | 13px |
下面统计INPUT[type=password]元素在各浏览器中默认字体样式的差异：
| IE6 IE8 IE8(EmulateIE7) @GB2312/UTF-84 | IE7 @GB2312/UTF-8 | Firefox | Chrome | Safari | Opera | |
|---|---|---|---|---|---|---|
| font-family | Tahoma | SimSun | SimSun | Arial | SimSun | 宋体 |
| font-size | 10pt3 | 10pt | 13px | 13px | 13px | 13px |
【注】
1. INPUT 元素的其他样式上的差异请参考 "各元素在不同浏览器下的默认样式差异" 一文。本文仅关注字体样式的差异。
2. 字体的默认样式在 IE 中是受页面编码影响的，在其他浏览器中则直接受浏览器语言版本的影响（本文提及的浏览器均为简体中文版）。
3. INPUT 元素文本框在所有浏览器中默认字号在IE中是10pt，在其他浏览器中是13px。但在使用屏幕媒体（显示器）查看网页时，二者的大小在绝大多数情况下（96dpi）是完全一致的。（10pt *
1/72in * 96dpi = 13.3333px ≈ 13px）。
4. 对于密码框，除 IE 外，其他浏览器均与 INPUT[type="text"] 文本框一致。而 IE6 与 IE8 中对于
INPUT[type="password"] 密码框则均为 "Tahoma" ，IE7 中则为 "宋体" 。对于密码框各浏览器在
"UTF-8" 与 "GB2312" 两种编码下的默认字体样式相同。
因为 INPUT[type=text/password] 元素的 "size" 属性将根据其值决定该元素的宽度，而各浏览器中该元素的默认字体也有差异，所以设置了相同 "size" 的 INPUT[type=text/password] 元素在各浏览器中的宽度也会有差异。
注意：INPUT 元素继承的字体特性将被覆盖
各浏览器中，为表单控件设置的默认样式是包括 "字体样式" 的，也就是说，表单控件被明确设定了字体样式。因此，表单控件继承自其祖先级元素的字体样式设置将被覆盖。
换句话说，除非用户明确设定表单控件的字体样式，否则这些控件看起来并没有从它们的祖先级元素继承下来任何字体样式。
请参考以下测试代码：
<div style="font-size:24px; font-family:Tahoma;"> Tahoma
24px; <input type="text" value="ABC123" /> </div>
这段代码在所有浏览器中运行后，INPUT 元素的字号字体特性仍为其默认样式，不受父元素的影响：
下面看看在相同的字体设置下根据size属性计算出来的宽度的差异
在相同的字体设置下，IE Firefox Chrome计算出的文本框的宽度比较接近，Safari Opera 则显得比其他浏览器更小。
分析以下代码：
<style> input { font:12px Simsun; margin:0; padding:0; border:0; } </style> <script>
for (var i = 1; i < 13; i++) { document.write('<input type="text" size="' + i +
'" /><br />'); } </script>
将 INPUT 元素的 margin、padding和 border 都清零，字体均为宋体 12px，查看 "size" 属性值为 1 至 12 时的宽度（单位：px）：
| IE(Q) | IE6(S) | IE7(S) | IE8(S) | Firefox | Chrome | Safari | Opera | |
|---|---|---|---|---|---|---|---|---|
| size="1" | 14 | 12 | 12 | 12 | 14 | 14 | 8 | 6 |
| size="2" | 20(↑6) | 18(↑6) | 18(↑6) | 18(↑6) | 20(↑6) | 20(↑6) | 14(↑6) | 12(↑6) |
| size="3" | 26(↑6) | 24(↑6) | 24(↑6) | 24(↑6) | 26(↑6) | 26(↑6) | 20(↑6) | 18(↑6) |
| size="4" | 32(↑6) | 30(↑6) | 30(↑6) | 30(↑6) | 32(↑6) | 32(↑6) | 26(↑6) | 24(↑6) |
| size="5" | 38(↑6) | 36(↑6) | 36(↑6) | 36(↑6) | 38(↑6) | 38(↑6) | 32(↑6) | 30(↑6) |
| size="6" | 44(↑6) | 42(↑6) | 42(↑6) | 42(↑6) | 44(↑6) | 44(↑6) | 38(↑6) | 36(↑6) |
| size="7" | 50(↑6) | 48(↑6) | 48(↑6) | 48(↑6) | 50(↑6) | 50(↑6) | 44(↑6) | 42(↑6) |
| size="8" | 56(↑6) | 54(↑6) | 54(↑6) | 54(↑6) | 56(↑6) | 56(↑6) | 50(↑6) | 48(↑6) |
| size="9" | 62(↑6) | 60(↑6) | 60(↑6) | 60(↑6) | 62(↑6) | 62(↑6) | 56(↑6) | 54(↑6) |
| size="10" | 68(↑6) | 66(↑6) | 66(↑6) | 66(↑6) | 68(↑6) | 68(↑6) | 62(↑6) | 60(↑6) |
| size="11" | 74(↑6) | 72(↑6) | 72(↑6) | 72(↑6) | 74(↑6) | 74(↑6) | 68(↑6) | 66(↑6) |
| size="12" | 80(↑6) | 78(↑6) | 78(↑6) | 78(↑6) | 80(↑6) | 80(↑6) | 74(↑6) | 72(↑6) |
宋体为等宽字体，在 12px 下每个字符宽度为 6px ，可以看到所有浏览器各 "size" 值相差均为6px，即一个 12px 宋体英文字符的宽度，size="1" 时各浏览器中文本框的宽度有很大不同，这也导致后面所有 "size" 值下宽度的不同。在相同的更宽字体下，IE Firefox Chrome 中的宽度比较接近，且偏大；而 Safari Opera 中的宽度则比较小。
下面将字体改为 "Arial" ，字号仍然为 12px，查看 "size" 属性值为 1 至 12 时的宽度（ 单位：px ）：
| IE(Q) | IE6(S) | IE7(S) | IE8(S) | Firefox | Chrome | Safari | Opera | |
|---|---|---|---|---|---|---|---|---|
| size="1" | 34 | 32 | 32 | 32 | 33 | 34 | 9 | 11 |
| size="2" | 39(↑5) | 37(↑5) | 37(↑5) | 37(↑5) | 38(↑5) | 39(↑5) | 16(↑7) | 22(↑11) |
| size="3" | 44(↑5) | 42(↑5) | 42(↑5) | 42(↑5) | 43(↑5) | 44(↑5) | 23(↑7) | 27(↑5) |
| size="4" | 49(↑5) | 47(↑5) | 47(↑5) | 47(↑5) | 48(↑5) | 49(↑5) | 30(↑7) | 32(↑5) |
| size="5" | 54(↑5) | 52(↑5) | 52(↑5) | 52(↑5) | 53(↑5) | 54(↑5) | 37(↑7) | 37(↑5) |
| size="6" | 59(↑5) | 57(↑5) | 57(↑5) | 57(↑5) | 58(↑5) | 59(↑5) | 44(↑7) | 42(↑5) |
| size="7" | 64(↑5) | 62(↑5) | 62(↑5) | 62(↑5) | 63(↑5) | 64(↑5) | 51(↑7) | 47(↑5) |
| size="8" | 69(↑5) | 67(↑5) | 67(↑5) | 67(↑5) | 68(↑5) | 69(↑5) | 58(↑7) | 52(↑5) |
| size="9" | 74(↑5) | 72(↑5) | 72(↑5) | 72(↑5) | 73(↑5) | 74(↑5) | 65(↑7) | 57(↑5) |
| size="10" | 79(↑5) | 77(↑5) | 77(↑5) | 77(↑5) | 78(↑5) | 79(↑5) | 72(↑7) | 62(↑5) |
| size="11" | 84(↑5) | 82(↑5) | 82(↑5) | 82(↑5) | 83(↑5) | 84(↑5) | 79(↑7) | 67(↑5) |
| size="12" | 89(↑5) | 87(↑5) | 87(↑5) | 87(↑5) | 88(↑5) | 89(↑5) | 86(↑7) | 72(↑5) |
"Arial" 字体为非等宽字体，浏览器在根据 "size" 属性计算宽度是产生了比较大的差异，并且通过测试发现，虽然设置了 size="12"，计算出的宽度并不一定能装下12个英文字母里最宽的 "w" 。
在非等宽字体下，仍然是 IE Chrome Firefox 中的宽度比较接近，且偏大；Safari 在 size="1" 时的宽度初始值较小，然而随着 "size" 属性的值的增大，其 "增幅" 比 IE Firefox Chrome 大，所以 Safari 中的文本框宽度会比其他浏览器宽很多；Opera 中只有在 size="1" 与 size="2" 时宽度比较特殊，之后其 "增幅" 也与 IE 相同。
可见：即便能保证 INPUT[type=text/password] 元素的字体样式在各浏览器中完全一致，该元素的最终宽度也可能出现差异。
解决方案
不要试图通过设置 "size" 属性使 INPUT[type=text/password] 元素在所有浏览器中的宽度一致，这是不可能的。在需要对这类元素做精确的控制时，应使用 CSS 的 'width' 和 'height' 特性。
另外不同浏览器的默认字体的区别会导致文本框内文字表现的差异，最好为 INPUT 元素显式设置字体样式覆盖其默认值，以保证文本框在所有浏览器中有相同的呈现效果。
参见
知识库
相关问题
测试环境
| 操作系统版本: | Windows 7 Ultimate build 7600 |
|---|---|
| 浏览器版本: |
IE6
IE7 IE8 Firefox 3.6.2 Chrome 5.0.356.2 dev Safari 4.0.5 Opera 10.51 |
| 测试页面: | inputsize.html |
| 本文更新时间: | 2010-08-03 |
关键字
INPUT size text password 文本框 密码框 大小 宽度 字体样式
