【分享】慎用 INPUT 元素的size属性控制其宽度
天气很闷热不说，连INPUT都欺负人，唉…… 在IE里好好的，其他浏览器中硬是折行了，无语凝噎……

INPUT元素是页面设计的最基本的元素之一，是FORM表单的组成部分，也可以单独使用。是用户交互必不可少的元素。

对于INPUT的布局，可能会出现在某些浏览器下正常，在某些浏览器中杂乱的现象：无缘无故的换行了- -！，曾经为此事甚感头疼。

造成布局问题的最直接的一个原因，往往是宽度高度设置的不合理导致的。更有甚者，是不设置高度，因为 INPUT 的size属性，也会影响它的宽度，所以，有的人往往只设置 size，不设置width，孰不知，因小而见大，一个不小心，就会出现布局的混乱。

size属性到底是？

当INPUT元素的“type”属性值为“text”（文本框）或“password”时（密码框），“size” 属性可以使输入框的宽度能够显示指定数目的字符。

而在 HTML4.01 中，对size的解释是：
size 属性告诉用户端其初始宽度，宽度以 ‘px’ 的形式给出，除非 INPUT 的 type 属性值是 “text”/“password”，那两种情况下，size 的属性值代表 INPUT 可容纳字符的个数。

既然，INPUT 是文本框和密码框的时候表示的是字符个数，那么，通过设置 size 所影响的 INPUT 元素的宽度，是不是会受字体宽度的影响呢？如果你有这一层想法，那就恭喜你了。

既然讲到字体宽度，就应该想到字体的默认类型。

各浏览器中的INPUT[type=”text”/”password”]默认字体类型

字体的默认样式在IE中是受页面编码影响的，在其他浏览器中则直接受浏览器语言版本的影响（本文提及的浏览器均为简体中文版）。大家可以通过开发工具查看默认字体。

测试

我们可以通过测试来看一下，在相同的字体和字体大小下，排除INPUT的padding和margin以及border的影响，各浏览器中INPUT的宽度大小。

HTML code

<style>
    input {
       font: 12px Simsun;
       margin: 0;
       padding: 0;
       border: 0;
    }
</style>
<script>
    window.onload = function() {
       var info = document.getElementById("info");
       info.innerHTML = document.getElementById("in1").clientWidth+"px";
    }
</script>
<input size="12" type="text" id="in1">
<div id="info"></div>

在各个浏览器中，值：

将字体 “Simsun” 改为“Arial”，后：

可见，即使在字体的大小和类型相同的条件下，INPUT的宽度还是有差异的。

慎用 size 代表宽度，用 width 特性较保险

用size代表宽度，会引起兼容性问题，再加上 INPUT本身的padding margin什么的差异，就更会影响了，所以，建议不要使用size设置宽度，最好使用 width来代替。


更多兼容性问题：【分享】浏览器兼容性问题目录


------解决方案--------------------
一直都用style width

刚学HTML的时候，才用SIZE
------解决方案--------------------
到现在还没用过SIZE。
------解决方案--------------------
很好，收藏了。下去实施
------解决方案--------------------
很好，谢谢，试验下。